Javascript 我不知道'；我不知道var的范围

我想用香草酱做一张桌子。但是我得到了一个不同的结果，这取决于我在哪里声明var

var body=document.body；
var table=document.createElement（'table'）；
var tr=document.createElement（'tr'）；
var td=document.createElement（'td'）；
body.appendChild（表）；
对于（变量i=0；i<3；i+=1）{
表1.儿童（tr）；
对于（var j=0；j<3；j+=1）{
tr.appendChild（td）；
td.textContent='td'；
}
}

请参阅以下网站上的文档：

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

在第一个代码中，您创建一个

tr

和一个

td

，然后在循环中，在每次迭代中，您从以前的位置删除

tr

和

td

，然后再追加它们

相反，在第二个代码中，每次迭代都要调用

createElement

，因此

td

和

tr

变量所包含的新元素在追加之前不存在于文档中，因此不会删除任何内容，因此会生成3x3网格

---

它实际上与范围没有任何关系——它与以下事实有关：您正在使用

createElement

创建新元素，而不是重复使用在先前迭代中附加的相同元素。

这是因为元素正在被替换。想象一下，在for循环之后，您尝试使用javascript访问

tr

元素，哪个

tr

现在属于哪个？第二个代码解决了这个问题，因为它在每个循环中创建一个新的

tr

元素。