Я не знаю сферу вар - PullRequest
Новая
       2

Я не знаю сферу вар

4 голосов
/ 12 января 2020

Я хочу сделать стол с ванилью js. Но я получил другой результат в зависимости от того, где я объявляю переменную. 

var body = document.body;
var table = document.createElement('table');
var tr = document.createElement('tr');
var td = document.createElement('td');
body.appendChild(table);
for (var i = 0; i < 3; i +=1) {
    
    table.appendChild(tr);
    for (var j = 0; j < 3; j+=1) {
        
        tr.appendChild(td);
        td.textContent = 'td';
    }
}

Я хотел сделать 3 * 3 таблицы. Но это составило 1 * 1 стол. 

var body = document.body;
var table = document.createElement('table');
body.appendChild(table);
for (var i = 0; i < 3; i +=1) {
    var tr = document.createElement('tr');
    table.appendChild(tr);
    for (var j = 0; j < 3; j+=1) {
        var td = document.createElement('td');
        td.textContent = 'td';
        tr.appendChild(td);
    }
}

И это успешно сработало. В чем разница?

1 Ответ

8 голосов
/ 12 января 2020

См. Документы по appendChild:

Метод Node.appendChild () добавляет узел в конец списка дочерних элементов указанного родительского узла. Если данный дочерний элемент является ссылкой на существующий узел в документе, appendChild () перемещает его из текущей позиции в новую позицию.

В своем первом коде вы создайте one tr и one td, а затем в циклах на каждой итерации вы удаляете tr и td из их предыдущих расположений перед добавлением их снова.

Напротив, во втором коде вы вызываете createElement на каждой итерации, поэтому новые элементы, которые содержат переменные td и tr , не существуют в документ перед добавлением, поэтому ничего не удаляется, и в результате создается сетка 3x3.

На самом деле это не имеет ничего общего с областью действия - это связано с тем, что вы вы создаете новые элементы с createElement вместо повторного использования того же элемента, который вы добавили в предыдущей итерации.

...