Changing the entire contents of an array through innerHTML manipulation

Question

Changing the entire contents of an array through innerHTML manipulation

I've encountered a strange issue with my Javascript code. I'm trying to create a table row using document.createElement("tr") and an array of cells like this:

cell = new Array(3).fill(document.createElement("td"));

However, when I populate the cells one by one using the innerHTML property, it seems to affect the entire array. Here's the code snippet:

row = document.createElement("tr");
cell = new Array(3).fill(document.createElement("td"));

cell[0].innerHTML = "Cat";
cell[1].innerHTML = "Dog";
cell[2].innerHTML = "Alligator";

row.appendChild(cell[0]);
row.appendChild(cell[1]);
row.appendChild(cell[2]);
myTable.appendChild(row);

The output shows:

cell[0] => "Alligator"
cell[1] => "Alligator"
cell[2] => "Alligator"

Why does assigning innerHTML to one cell change all cells in the array?

javascript arrays

Answer 1

Answer №1

The issue arose from the use of 'filll', which resulted in the same td being duplicated. A solution is to generate an independent td element for each item.

ligne = document.createElement("tr");
var datas = ['Chat', 'Chien', 'Alligator'];
for(var i=0; i<datas.length; i++) {
    var td = document.createElement("td");
    td.innerHTML = datas[i];
    ligne.appendChild(td);
}

maTable.appendChild(ligne);

Answer 2

The issue arose from the use of 'filll', which resulted in the same td being duplicated. A solution is to generate an independent td element for each item.

ligne = document.createElement("tr");
var datas = ['Chat', 'Chien', 'Alligator'];
for(var i=0; i<datas.length; i++) {
    var td = document.createElement("td");
    td.innerHTML = datas[i];
    ligne.appendChild(td);
}

maTable.appendChild(ligne);

Answer 3

Answer №2

The issue at hand pertains to:

cellule = new Array(3).fill(document.createElement("td"));

The problem arises from creating an array with 3 identical td elements. Consequently, modifying the element at index 0 will affect those at index 1 and 2, as they point to the same memory location.

To rectify this, a solution is to manually construct an array using a for loop, pushing distinct references of the element into the cellule array.

Refer to the following example:

var maTable = document.getElementById("myTable");
var ligne = document.createElement("tr");

var cellule = [];
for(var i = 0; i < 3; i++) {
  cellule.push(document.createElement("td"));
}

cellule[0].textContent = "Cat"; // use textContent instead of innerHTML if only adding text
cellule[1].textContent = "Dog";
cellule[2].textContent = "Alligator";

ligne.appendChild(cellule[0]);
ligne.appendChild(cellule[1]);
ligne.appendChild(cellule[2]);
maTable.appendChild(ligne);

<table id="myTable" border="1"></table>

Answer 4

The issue at hand pertains to:

cellule = new Array(3).fill(document.createElement("td"));

The problem arises from creating an array with 3 identical td elements. Consequently, modifying the element at index 0 will affect those at index 1 and 2, as they point to the same memory location.

To rectify this, a solution is to manually construct an array using a for loop, pushing distinct references of the element into the cellule array.

Refer to the following example:

var maTable = document.getElementById("myTable");
var ligne = document.createElement("tr");

var cellule = [];
for(var i = 0; i < 3; i++) {
  cellule.push(document.createElement("td"));
}

cellule[0].textContent = "Cat"; // use textContent instead of innerHTML if only adding text
cellule[1].textContent = "Dog";
cellule[2].textContent = "Alligator";

ligne.appendChild(cellule[0]);
ligne.appendChild(cellule[1]);
ligne.appendChild(cellule[2]);
maTable.appendChild(ligne);

<table id="myTable" border="1"></table>

Answer 5

Answer №3

fill inserts the same element (with the same reference) into your array.

You have the option to add your elements in a different way, such as

cellule = [];
for (let i = 3; i--;) {
  cellule.push(document.createElement("td"));
}

or

cellule = new Array(3);
for (let i = cellule.length; i--;) {
  cellule[i] = document.createElement("td");
}

Answer 6

fill inserts the same element (with the same reference) into your array.

You have the option to add your elements in a different way, such as

cellule = [];
for (let i = 3; i--;) {
  cellule.push(document.createElement("td"));
}

or

cellule = new Array(3);
for (let i = cellule.length; i--;) {
  cellule[i] = document.createElement("td");
}

Answer 7

Answer №4

When the fill method is given an object, it will duplicate the reference and populate the array with references to that same object.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill#Description

Here is an example demonstrating how this can be achieved:

    cells = new Array(3).fill("")
    cells.forEach((el,index) => cells[index] = document.createElement("td"))
    cells[0].textContent = "Cat"; 
    cells[1].textContent = "Dog";
    cells[2].textContent = "Crocodile";
    console.log(cells[0].textContent);
    console.log(cells[1].textContent);
    console.log(cells[2].textContent);

Answer 8

When the fill method is given an object, it will duplicate the reference and populate the array with references to that same object.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill#Description

Here is an example demonstrating how this can be achieved:

    cells = new Array(3).fill("")
    cells.forEach((el,index) => cells[index] = document.createElement("td"))
    cells[0].textContent = "Cat"; 
    cells[1].textContent = "Dog";
    cells[2].textContent = "Crocodile";
    console.log(cells[0].textContent);
    console.log(cells[1].textContent);
    console.log(cells[2].textContent);

Changing the entire contents of an array through innerHTML manipulation

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Pause jQuery at the conclusion and head back to the beginning

NodeJS npm module installed globally is unable to run the main/bin JavaScript file using node command

The code threw an error stating: "Error: Unable to set a new value to the unalterable property 'children' of the object '#<Object>'"

Post request in ExpressJS fails to redirect user after submission

Tips for crafting interactive Dropdown menus

I am looking to integrate my information into the user interface using Angular

Neglecting to include an HTTP header

Transform the event information based on specific configuration settings

Handling Json data by parsing it and storing it into a MySQL database

Enable users to input their custom code and run it when the specified conditions are met

Capture each touchdown and convert it to currency format

Generating option list from API JSON responses

The function is triggered only on resize, not on initial load

In JavaScript, creating a new array of objects by comparing two arrays of nested objects and selecting only the ones with different values

Obtain the JSON object by provided criteria

JavaScript - AngularJS HTML parser

Trigger a series of child functions upon clicking the parent button

Encountering difficulties during the migration process from a JavaScript to a TypeScript React Component

Determining the availability of a remote source in React: A step-by-step guide

AngularJS: dependent dropdown menus