setAttribute() not working

[Mittineague]

Try changing the two name setAttributes so they have different values. eg. “gebtn-helloButton” and “dqs-helloButton”

[jcarlisle2]

@Mittineague I feel like an absolute idiot. I guess you have to drill down to the elements in DOM, and have them expanded in order for anything to be displayed in the console. Something tells me this has been working THE WHOLE TIME. Geez. Shaking my head.

The elements in my original code are now being displayed in the console. Many thanks to @zack1 and @m3g4p0p and @Dormilich for your patience and persistence with me.

[zack1]

I dealt with this recently. It’s not just that some HTML is “expanded”, but that Javascript was generating the new DOM stuff on the fly so it didn’t exist in the source at all. Kind of like a one page app. The URL stayed the same, and there was no page refresh, but some AJAX was used to move between sections and “expand” new content.

It was pretty difficult to latch on to this but it can be done by monitoring when child nodes of a certain parent are changed. In other words, you can create an event on some parent element to trigger whenever child nodes are changed, this would let you monitor for when the new content gets expanded and run your code after that.

If you like, I can find the technique I used for this and post some code.

Otherwise, glad you found the issue

[jcarlisle2]

@zack1

I dealt with this recently. It’s not just that some HTML is “expanded”, but that Javascript was generating the new DOM stuff on the fly so it didn’t exist in the source at all. Kind of like a one page app. The URL stayed the same, and there was no page refresh, but some AJAX was used to move between sections and “expand” new content.

It was pretty difficult to latch on to this but it can be done by monitoring when child nodes of a certain parent are changed. In other words, you can create an event on some parent element to trigger whenever child nodes are changed, this would let you monitor for when the new content gets expanded and run your code after that.

@zack1 Thanks!! And absolutely - if you wanted to post your sample code, that would helpful.

And me too!

[zack1]

So what you need is an observer.

$(function() {
  
  // Parent node to observe
  var specialContainer  = document.querySelector('#this-must-exist-as-a-parent');

  // When observer is triggered
  var termsObserver = new MutationObserver(function(mutations) {
    // Inject DOM stuff when ready
    $("#jquery-fun").parents(".traverse-up-yo").append("<button style='background:#ED6E41' onclick='someFunc(event);'>Do stuff</button>");
    // Inject as much DOM as needed
    $(".more-classes").after("<a href='#'' onclick='otherFunc();return false;'>Print It</a>");

    // Stop observing
    termsObserver.disconnect();
  });

  // Start the observer
  termsObserver.observe(specialContainer, {attributes: false, childList: true, characterData: false, subtree: true});
});

The last line is important and you should look at the docs for those arguments and what they do. In my example above, I start the observer by saying “hey, watch this node with this ID, I’m only interested in when the child nodes and subtree are updated, then run these commands when changes are detected.”

When the observer triggers, my jquery DOM injections run through.

I think observers are pretty well adopted so the code should work for most.

[Mittineague]

The last time I touched mutation observers was a good while ago. No matter what code I tried to do GC, it seems the scripts still ate a lot of memory up to and including hanging the browser.

Do you have any tips in this regard?

[m3g4p0p]

@Mittineague maybe this would have been mutation events? The mutation observer had been introduced to solve these performance issues… however I have to say I never found a real use case for mutation observers. The only time I had to use one myself was to intercept DOM changes performed by some 3rd party code over which I had no influence.

@jcarlisle2

On a sidenote, I’m trying to determine why when I change [0] to [1] BOTH buttons (get node tag and Hello World) are changed.

These two lines will return the same element, namely the first button on the page:

document.getElementsByTagName("button")[0]
document.querySelector("button")

So if you change the index to 1, you’ll get two different buttons – the first and the second one.