я не могу поместить это в цикл, чтобы сократить мой код. Это дает ошибку типа узла

Question

Я пытаюсь добавить этот код в цикл for, но он выдаёт мне сообщение об ошибке ниже

"Не удалось выполнить 'appendChild' на 'Node': параметр 1 не относится к типу 'Node'"

let tableBody = document.querySelector('#table tbody');    

let row1 = document.createElement('tr');
let row2 = row1.cloneNode(true);
let row3 = row1.cloneNode(true);
let row4 = row1.cloneNode(true);
let row5 = row1.cloneNode(true);

tableBody.appendChild(row1);
tableBody.appendChild(row2);
tableBody.appendChild(row3);
tableBody.appendChild(row4);
tableBody.appendChild(row5);

Я пытаюсь вот так

for(i = 1; i <=5; i++){
  tableBody.appendChild('row' + i);
}

Answer 1

Причина, по которой вы код tableBody.appendChild('row' + i); не работает 'row' + i - это не что иное, как жало, которое не является переменной, содержащей узел, поместите все строки в массив и добавьте его оттуда

попробуйте это

let tableBody = document.querySelector('#table tbody');    

let rows=[];
rows.push(document.createElement('tr'));
rows.push(row1.cloneNode(true));
rows.push(row1.cloneNode(true));
rows.push(row1.cloneNode(true));
rows.push(row1.cloneNode(true));


for(i = 0 ; i <rows.length; i++){
  tableBody.appendChild(row[i]);
}

Предлагая чтение: массив, переменные, функция

Answer 2

appendChild принимает объект узла DOM (https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild), Как уже упоминалось, вы предоставляете строку.

Выглядит так, как будто вы хотите создать таблицу с 5 строками, если так, то вот как вы могли бы это сделать:

for(i = 1; i <=5; i++){
  tableBody.appendChild(document.createElement('tr'));
}

Answer 3

Вы не добавляете реальный объект. Вы добавляете строку.

Попробуй вот так:

let tableBody = document.querySelector('#table tbody');    

let rows = []
rows.push(document.createElement('tr'));
rows.push(rows[0].cloneNode(true));
rows.push(rows[0].cloneNode(true));
rows.push(rows[0].cloneNode(true));
rows.push(rows[0].cloneNode(true));

rows.forEach(row => {
  tableBody.appendChild(row);
})