我不知道 var 的范围答案

【问题标题】：I don't know the scope of var我不知道 var 的范围
【发布时间】：2020-01-12 05:23:49
【问题描述】：

我想用 vanilla 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);
    }
}

它成功地工作了。有什么区别？

【问题讨论】：

这是因为元素被替换了。想象一下，在 for 循环之后，您尝试使用 javascript 访问 tr 元素，而 tr 现在属于哪个？第二个代码解决了这个问题，因为它在每个循环中创建一个新的 tr 元素。

标签： javascript scope

【解决方案1】：

请参阅appendChild 上的文档：

Node.appendChild() 方法将一个节点添加到指定父节点的子节点列表的末尾。 如果给定子节点是对文档中现有节点的引用，则 appendChild() 将其从当前位置移动到新位置。

在您的第一个代码中，您创建 one tr 和 one td，然后在循环中，在每次迭代中，删除 tr和 td 从它们以前的位置重新添加它们。

相比之下，在您的第二个代码中，您在每次迭代时都调用 createElement，因此 td 和 tr 变量持有的新元素文档中不存在在被附加之前，因此不会删除任何内容，结果会生成 3x3 网格。

它实际上与范围没有任何关系 - 它与您使用 createElement 创建新元素而不是重复使用您在先前迭代中附加的相同元素这一事实有关。

【讨论】：