How to select an element added to the DOM dynamically?

[bendqh1]

After I click a button, a popup appears.

I would say that this popup’s DOM part is created dyamically.

I try to select an element inside this popup, but it can’t be selected:

document.querySelector('.Button__contentWrapper--11-4-12');

null

How to select an element added to the DOM dynamically?

By the way, when I use the web browser developer tool to select the button itself with the mouse, I get the ::after pseudo element of the element and not the element itself; maybe that’s the reason that I fail to select that element, so perhaps the true question should be how to select a pseudo element of a dynamically created element?

[m_hutley]

well you told us youre looking for an element classed x, and then showed us a picture of a span with no x class.

What are you actually trying to find?

Even dynamically created elements show up in the DOM inspector.

[bendqh1]

Well I just wanted to shorten the post but I have just changed the class name to the one in the picture.

I am actually trying to find (i.e. to select) the element with that class, or the ::after pseudo element, both of them part of a dynamically added popup.

In your opinion, why do I get null when trying to select that element?

[m_hutley]

With no further context, my opinion is you’re trying to select it before its been added to the DOM.

[bendqh1]

Thanks. I am trying to select it via the web browser console, many seconds if not minutes after it was added to the DOM.

[m_hutley]

So if your web console’s Elements tab looks like that picture, and you go to your console, and type in document.querySelector(".Button__contentWrapper--11-4-12"), you get null? And you’re putting in the double underscore and double hyphen?

[James_Hibbard]

@bendqh1

I am trying to select it via the web browser console

You can follow these steps. I’m using Firefox, but something similar should work with other browsers.

1. Select the item on the page. You can do this by (for example) clicking the box with an arrow in it in the top left corner of the developer tools, then clicking on the element in the page.

   

2. Right click the highlighted element and select “Use in console”

3. Head to the console and the DOM element will be stored in the variable temp0

   

If that doesn’t work, please post a link to the page where we can see this behaviour for ourselves and give us a clear description of which element it is that you are trying to select.

[bendqh1]

Yes, excatly.

[kicken]

In your previous thread, you were talking about this button being part of a shadow dom. Is that still the case? If so, that would be why you cannot select it.

[bendqh1]

Hi James !

Here is a webpage example.

If you scoll down to the end of the webpage you will should see this button:

Then, if you click that button a popup will appear, and then, if you scroll down to the end of the popup, you should see this button:

This second button, in the very end of the popup, is the button I want to remove, but have failed to do so time and again.

@kicken that’s what I reffered to in my previous question, I invite you to check this out as well !

[kicken]

As mentioned in the other thread, since that button is part of a shadow dom, you cannot query it directly like this, You have to first query the shadow host, then query it’s dom for the button. For example:

document.querySelector('div[data-spotim-module]').firstElementChild.shadowRoot.querySelector('.Button__primary--11-4-12')

[James_Hibbard]

The method I mentioned using the console will work, but I’m not sure how much use that will be. And besides, kicken has given you the answer.

[bendqh1]

Thanks a lot, dear kicken.

Your code example is the only one that worked for me so far.

Please help me to understand it.

document.querySelector('div[data-spotim-module]')

There are wrappers before 'div[data-spotim-module]' so why did you choose this particular wrapper? Because it’s the first wrapper under the #shadow-root (open) right?
If so then I guess that a “shadow DOM” should be defined as:

“Everything that comes under a shadow root pseudo element, until the end of that pseudo element”.

firstElementChild

Why did you use it in this particular case?

shadowRoot.querySelector('.Button__primary--11-4-12');

That says that we select an element “inside the first wrapper of a shadow DOM”, correct?

[m_hutley]

@bendqh1

why did you choose this particular wrapper? Because it’s the first wrapper under the #shadow-root (open) right?

above.

They had to choose something above the shadow root to be able to “find” the Shadow root.
I’m guessing they chose div[data-spotim-module] because the thing below it, which for me was ow-hhofdgkepmg, looks like its a string of random letters that probably gets randomized at some interval, where the div should remain a div with a spotim-module data point.

@bendqh1

firstElementChild

Why did you use it in this particular case?

Because they had selected the div, and are assuming that the name of that element under the div is a random/changing string, so the firstElementChild is how you find that element from its parent, whatever its currently called.

@bendqh1

shadowRoot.querySelector('.Button__primary--11-4-12');

That says that we select an element “inside the first wrapper of a shadow DOM”, correct?

shadowRoot is like firstElementChild. It’s an accessor from the parent (the ow-hho…etc) into a ‘child’ (in this case, a pseudoelement child property).
Once you’ve gotten the top node you want to search from, querySelector operates within that scope. querySelector will search within that element.