var divElement = document.createElement("div");
divElement.setAttribute('id', 'Items');

var ulElement = document.createElement("ul");
var liElement = document.createElement("li");
var spanElement1 = document.createElement("span");
var spanElement2 = document.createElement("span");
liElement.appendChild(spanElement1);
liElement.appendChild(spanElement2);
ulElement.appendChild(liElement);

when I enter selector query, I cant get elements.

document.querySelectorAll("divElement ul li"); should give
document.querySelectorAll("#Items ul li");

but its not working, how to get the id at runtime????

var divElement = document.createElement("div");
divElement.setAttribute('id', 'Items');

var ulElement = document.createElement("ul");
var liElement = document.createElement("li");
var spanElement1 = document.createElement("span");
var spanElement2 = document.createElement("span");
liElement.appendChild(spanElement1);
liElement.appendChild(spanElement2);
ulElement.appendChild(liElement);

when I enter selector query, I cant get elements.

document.querySelectorAll("divElement ul li"); should give
document.querySelectorAll("#Items ul li");

but its not working, how to get the id at runtime????

• javascript
• list
• typescript
• htmlelements

• Use whitespace instead of dot. – kind user Commented Feb 28, 2017 at 12:11
• 1 Its not working @kindUser – coder Commented Feb 28, 2017 at 12:25
• 1 document.querySelectorAll('divElement ul li'). I've checked it. It works. – kind user Commented Feb 28, 2017 at 12:28

4 Answers 4

finally came up with solution. we can get "id" from the user using getElementById and then its simple to apply query selector.

document.getElementById(id).querySelectorAll('ul li');

Use divElement.querySelectorAll('ul li') if you still have access to divElement or document.querySelectorAll('div ul li') without access.

Note how there is no dot. . are use for classes in CSS. For element you simply use the tag name.

divElement is the reference of the element you created in JS but its CSS selector is div not divElement. JS name variable cannot be used within the selector string.

Good read on the subject querySelectorAll doc and how css selectors work

you can get element by id then use query selector like so: console.log(document.getElementById('details').querySelectorAll('ul li'))

<ul id="details"> == $0
    <li>
      <span>
         <label>TEST</label>
         <p>GEORGE</p>
        </span>
    </li>
    <li>
      <span>
        <label>TEST_TWO</label>
        <p>2131</p>
          </span>
    </li>
  </ul>

you need to study querySelectorAll first

Basic Syntax

elementList = document.querySelectorAll(selectors);

In your case

elementList = document.querySelectorAll(div ul li);

here are helpful links