Adding every single table located in a div onto the body of the document

Question

Adding every single table located in a div onto the body of the document

In my code, there is a div containing 3 tables.

var x = tempDiv.getElementsByClassName("hiscore_table");

I can confirm this because when I log it in the console, it shows like this:

https://i.sstatic.net/iYBB8.png

To organize the tables, I create a new div to append them to:

var newDiv = document.createElement('div');

for (let i = 0; i < x.length; i++) {
    newDiv.appendChild(x[i]);
}

However, when I append the new div to the body, only 2 tables are visible. After debugging, I noticed that the loop is only running 2 times even though x.length returns 3. I suspect that when I append child, it might be deleting the tables from the old div, causing this issue.

javascript

Answer 1

Answer №1

When you create a fresh <div> and add existing elements from the DOM to it, you are essentially eliminating those elements from the DOM to place them in the new <div> (which is not part of the DOM).

It's important to note that HTMLCollections (the result of document.getElementsByClassName) are dynamic lists. This implies that any changes made to the DOM immediately impact the collection.

Initially, with i being 0, you append the first element, thereby reducing the collection to just two elements.

Subsequently, with i set to 1, you append the second element from the remaining collection, effectively the third element overall, leaving only one element in the collection.

As the loop continues and i becomes 2, it surpasses the bounds of the now single-element collection.

This scenario is reminiscent of deleting items from an HTMLCollection.

Various methods can be employed to tackle this issue, such as iterating in reverse order. Alternatively, a functional method is my preferred choice:

Array.from(x).forEach((table) => newDiv.appendChild(table));

This technique immediately converts the HTMLCollection into an array, making it non-dynamic.

Answer 2

When you create a fresh <div> and add existing elements from the DOM to it, you are essentially eliminating those elements from the DOM to place them in the new <div> (which is not part of the DOM).

It's important to note that HTMLCollections (the result of document.getElementsByClassName) are dynamic lists. This implies that any changes made to the DOM immediately impact the collection.

Initially, with i being 0, you append the first element, thereby reducing the collection to just two elements.

Subsequently, with i set to 1, you append the second element from the remaining collection, effectively the third element overall, leaving only one element in the collection.

As the loop continues and i becomes 2, it surpasses the bounds of the now single-element collection.

This scenario is reminiscent of deleting items from an HTMLCollection.

Various methods can be employed to tackle this issue, such as iterating in reverse order. Alternatively, a functional method is my preferred choice:

Array.from(x).forEach((table) => newDiv.appendChild(table));

This technique immediately converts the HTMLCollection into an array, making it non-dynamic.

Answer 3

Answer №2

For the sake of inclusivity, in order to provide compatibility for older browsers without relying on polyfills or other similar solutions (e.g. sustaining resilient and easily maintainable code), you could employ a while loop:

while (x[0]) {
  newDiv.appendChild(x[0]);
}

Alternatively, a straightforward approach is to utilize querySelectorAll, which yields a static NodeList:

var x = tempDiv.querySelectorAll(".hiscore_table").

Answer 4

For the sake of inclusivity, in order to provide compatibility for older browsers without relying on polyfills or other similar solutions (e.g. sustaining resilient and easily maintainable code), you could employ a while loop:

while (x[0]) {
  newDiv.appendChild(x[0]);
}

Alternatively, a straightforward approach is to utilize querySelectorAll, which yields a static NodeList:

var x = tempDiv.querySelectorAll(".hiscore_table").

Adding every single table located in a div onto the body of the document

Answer №1

Answer №2

Similar questions

Can we switch the country name to the database name in Jvector?

Create the artwork on cube surfaces as a complete unit, rather than focusing on the individual triangles that form the face - three.js

Challenge encountered with Promise failing to resolve despite multiple retry attempts

What is the method for toggling a checkbox on and off repeatedly?

Efficiently transferring components of a JavaScript project between files

The Angular 9 custom directive is malfunctioning on mobile devices

Automatically bypassing git conflicts in package.json: A step-by-step guide

Checking that an object's keys are all present in an array in TypeScript should be a top priority

Exploring Angular Firebase Database Queries

Using jQuery to show/hide linked CSS3 animations upon Mouseenter/Mouseleave events

What are some strategies for sorting information from a list that is constantly changing?

Include the distribution file from the npm package in the final build

Streamline email error management within nested middleware functions

Prevent unexpected page breaks in <tr> elements on Firefox (Could JavaScript be the solution?)

Discovering the precise location of the required() file

Origin of SVG Circle Stroke

Determine the presence of a JSON object within a file using JavaScript

Unexpected Token E encountered in the Twitter stream.on function

Refreshing RadioGroup selection in React.js

What is the best way to incorporate a dropdown menu into existing code without causing any disruption?