JS: how to get all elements created through JS

Question

Var x = 0;
btn.onclick = function (){
for(x = 0; x < 1; x++){
Var elm = doc...createElement("li");

aButton.onclick = function(){
elm.style.color = "#000"
}
}
I need all the elms, so I can use them anywhere.

Answer 1

Ipang here,s the code i was working on.
In the pickBtn.onclick = function(){

}
I tried to use the class name, didn't work for me.

https://code.sololearn.com/WphlX5xuimCR/?ref=app

Answer 2

Yes I can see that. So you want to collect all <li> elements after you create and add them to the <parent> right? you should finish adding all the necessary <li> first, then you can collect them by `document.querySelectorAll()`

But in your code you try to collect BEFORE the new <li> element is appended to <parent>.

Answer 3

Ginfio
This code adds new elements on page load, then with a button we can collect the new elements by specifying the class in the call to `document.querySelectorAll()`

https://code.sololearn.com/WdK7PQOle66T/?ref=app

Answer 4

Ipang , I switched my code a little bit to make it look like yours. had the same problem.
Do you think my code is fixable to collect all the created elements and give them positiom:absolute like o'm trying to do in the pickBtn.onclick ... function?
How

Answer 5

Never mind. I got it figured out.
I used for ()
ThankYou for your help.
Ipang

Answer 6

Maybe you can assign a class for the elements while you are creating/adding the elements, later on you can use `document.getElementsByClassName()` or `document.querySelectorAll()` to collect them.

Please remove 'document.create("div")' from tags, no code (unless really necessary) should be in tags 👍

Answer 7

Ginfio

h = document.querySelectorAll(".new_elm");

It seems you are trying to collect all elements having class 'new_elm' while in fact the newly created <list> element had not been added to the container <parent>.

And what's this loop in the function `add` for anyway, going from 0 to 1 you pretty much only do one iteration.

for (i = 0; i < 1; i++)
{
// codes here
}

Answer 8

Ipang , the add function adds the new list in the parent.
creates new elm.

Answer 9

Ginfio
Share the latest update of the code please? I'd like to see it too, so I can also learn from the problem, and what you did to overcome it 👍