在for循环中使用jQuery的.append()方法

Question

我在这里寻找答案，但是所有与我的问题相关的问题都对像我这样刚开始学习JavaScript的人来说有点太复杂了。

我想基于用户输入（例如：如果用户选择宽度为16，则会看到一个16x16的网格），使用js/jquery创建一组div的网格。

现在，我想添加一个DOM元素，使用var $smallDiv = $('<div class="smallDiv"></div>');

以下是根据用户输入添加所需数量的div的循环：

function addDiv() {
$('#container').append($smallDiv);
}
for (i = 1; i <= divCounter * divCounter; i++){
addDiv();
}

问题在于这将始终只创建一个div。 我已经使用console.log()检查了循环的运行次数。所以它显然起作用，但是我感觉每次循环时，新的div会覆盖先前的div。 这不是我对.append()的期望。

我设法通过使$smallDiv变量成为普通变量（从其值中删除$，使其成为纯文本）来解决问题，但我想知道这两个变量之间有何不同，为什么其中一个可以在上述情况下工作而另一个不能。

请让我更容易理解，因为我刚开始学习JS / jQuery。

- Lessar277

---

你能添加完整的HTML和JS吗？ - Tushar

Answer 1

在循环中，您多次附加相同的dom元素引用（$smallDiv），这意味着该元素仅会被添加一次。

相反，在每次循环迭代中，您需要创建新的实例-您可以使用.clone()来完成。

function addDiv() {
    $('#container').append($smallDiv.clone());
}

- Arun P Johny

---

A. 你需要使用嵌套循环来创建多行而不仅仅是一行。B. 更好的方法是生成完整的HTML，然后将其附加到“#container”，因为最“重”的操作是DOM的操作，尽可能少地进行操作会更好。 - Mosh Feu

更好的做法是，您可以在这个代码片段中添加注释 A，这样它就完美了 :) - Mosh Feu

Answer 2

作为Arun P Johny方案的替代方案，这个看起来也能够工作：

var smallDiv = '<div class="smallDiv"></div>'

function addDiv() {
    $('#container').append(smallDiv);
}

for (i = 1; i <= divCounter * divCounter; i++){
    addDiv();
}

这样，我们不使用相同的DOM元素，而是使用一个简单的字符串进行追加。

- Artur K.