我想用 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);
}
}
并且成功了。有什么区别？
请参阅文档appendChild:
Node.appendChild() 方法将一个节点添加到指定父节点的子节点列表的末尾。如果给定的子节点是对文档中现有节点的引用，appendChild() 会将其从当前位置移动到新位置。
在您的第一个代码中，您创建one tr and one td，然后在循环中，在每次迭代中，删除tr and td在再次附加它们之前从以前的位置添加它们。
相反，在你的第二个代码中，你调用createElement在每次迭代中，因此新元素td and tr变量保持文档中不存在在附加之前，因此不会删除任何内容，并最终生成 3x3 网格。
它实际上与范围没有任何关系 - 它与您创建新元素的事实有关createElement而不是重复使用您在先前迭代中附加的相同元素。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
