I am unable to retrieve the values from a manually created JavaScript list using querySelectorAll()

Question

I am unable to retrieve the values from a manually created JavaScript list using querySelectorAll()

  const myList = document.createElement("div");
        myList.setAttribute('id', 'name');
        const list1 = document.createElement("ul");
         const item1 = document.createElement("li");
            let value1 = document.createTextNode("america");
            item1.appendChild(value1);
         const item2 = document.createElement("li");
                 let value2 = document.createTextNode("london");
            item2.appendChild(value2);
            list1.appendChild(item1);
            list1.appendChild(item2);
            myList.appendChild(list1);

Upon entering let li = document.querySelectorAll("#name li");

I can't seem to retrieve the list element with the li tag. What could be causing this issue in the code?

javascript list typescript nodes

Answer 1

Answer №1

Instead of making that call, try this:

List.querySelectorAll("#name li");
//even better
List.querySelectorAll("li");
//since you already have the handle for #name element.

Whether they are appended to the document or not, you will still retrieve the elements from the query.

Avoid calling for the document Element on query selectors if you already have the root node of your query subjects or a local wrapper unique ID available.

It can be costly!

Always strive to avoid it.

Avoid using querySelectorAll unless absolutely necessary.

List.getElementsByTagName("li");

This is generally a better and faster approach to take.

Answer 2

Instead of making that call, try this:

List.querySelectorAll("#name li");
//even better
List.querySelectorAll("li");
//since you already have the handle for #name element.

Whether they are appended to the document or not, you will still retrieve the elements from the query.

Avoid calling for the document Element on query selectors if you already have the root node of your query subjects or a local wrapper unique ID available.

It can be costly!

Always strive to avoid it.

Avoid using querySelectorAll unless absolutely necessary.

List.getElementsByTagName("li");

This is generally a better and faster approach to take.

Answer 3

Answer №2

To properly incorporate the List node you've generated into the document, follow these steps:

let List = document.createElement("div");
List.setAttribute('id', 'test');
let List1 = document.createElement("ul");
let List2 = document.createElement("li");
let Value = document.createTextNode("java");
List2.appendChild(Value);
let List3 = document.createElement("li");
Value = document.createTextNode("ajax");
List3.appendChild(Value);
List1.appendChild(List2);
List1.appendChild(List3);
List.appendChild(List1);

document.body.appendChild(List);

After executing the above code snippet, your document.querySelectorAll statement should function correctly.

Answer 4

To properly incorporate the List node you've generated into the document, follow these steps:

let List = document.createElement("div");
List.setAttribute('id', 'test');
let List1 = document.createElement("ul");
let List2 = document.createElement("li");
let Value = document.createTextNode("java");
List2.appendChild(Value);
let List3 = document.createElement("li");
Value = document.createTextNode("ajax");
List3.appendChild(Value);
List1.appendChild(List2);
List1.appendChild(List3);
List.appendChild(List1);

document.body.appendChild(List);

After executing the above code snippet, your document.querySelectorAll statement should function correctly.

Answer 5

Answer №3

It appears that the reason for this issue is due to the absence of List being added to the document.

Answer 6

It appears that the reason for this issue is due to the absence of List being added to the document.

I am unable to retrieve the values from a manually created JavaScript list using querySelectorAll()

Answer №1

Answer №2

Answer №3

Similar questions

Exploring Directories with asp.net and C# to Find Folders

Customize the appearance of disabled dates in the eonasdan-datetimepicker styling

What is the technique for hiding the bottom tab navigator upon leaving a specific screen in React Native version 5?

An animation triggered by scrolling using the @keyframes rule

Node Selenium for Importing Excel Files---I will help you

Retrieve a JSON response from within a schema housed in MongoDB

How to easily open a search page with just a click on the search field in CodeIgniter?

Troubleshooting Socket-io Client Problem After Migrating to TypeScript

Joi validation that focuses on required array elements while disregarding nested keys

Utilize JavaScript objects to convert subscripts into HTML elements

Encountering an issue with Google distance matrix where property 'text' is undefined

After the state loads in Ui-router, how can I execute a function?

Encountered an issue while trying to update a ServiceWorker for scope - Received a HTTP error

Vue.js does not seem to be properly assigning attributes that are declared within the data object array

Ways to display a price near a whole number without using decimal points

`how to extract the href attribute value from the hyperlink that triggered a modal in jQuery UI`

Animating sprites using TypeScript

seeking a way to integrate Amazon information into a PHP form

The benefits of installing gulp plugins locally versus globally

`The server fails to retrieve parameters passed through an angularJS HTTP GET request,