Add custom block under selected shipping methode magento 2 not working

Question

I am creating a magento2 module and I want to add an html block to selected shipping method: I am using jQuery to achieve this but I will accept other workarounds all I want is to make this work.

I tried this :

https://magento.stackexchange.com/a/162967/78274

But the problem is the block is added after all shipping methods which isn't what I am looking for. However I tried to use it.

I used jQuery and managed to add my block under selected shipping method but my problem is this works only the first time I load the page when mychippingmethod is selected by default, but when I reload the page even though mychippingmethod is selected by default nothing is added. But if I click on my shipping method my block is added.

Then I tried to switch between after and append but nothing changed I had the same problem.

What I tried so far :

jQuery("tr:contains('mychippingmethod')").append("#my-carrier-custom-block-wrapper");

I also tried

var myelement = "example";
jQuery("tr:contains('mychippingmethod')").after(myelement);

Even trying to append a simple text doesn't work.

I wouldn't say that magento2 isn't allowing me to edit the shipping block since it does work the first time and this is what's making me frustrated why would it work the first time and then stops.

I would accept a solution to uncheck all the shipping methods by default too.

EDIT :

If i append :

<tr class=\"row\"><td>aaaaaaaaa</td></tr>

My after function doesn't work even in the first time but If i select my shippingmethode my text gets appended ! so maybe I am adding it wrong

Please help.

Answer 1

I was able to find a workaround with setInterval ... the problem is that when I execute my script the table containing

jQuery("tr:contains('mychippingmethod')")

is still used by Magento so he doesn't allow me to change it until he finishes loading the whole table. So what I did is looking for my appended html tag with id as long as it's not added my code get executed again:

if (selectedMethod == 'myshippingmethod') {

                var checkExist = setInterval(function() {
                    if ($("#myid").length == 0) {
                        jQuery("tr:contains('myshippingmethod')").after(myelement);
                       clearInterval(checkExist);
                    }
                 }, 100);
        }

Hope this helps