Question

我正在尝试使用以下代码将40个新div元素追加到#colors div：

$( document ).ready(function() {
    var $node = $("<div></div>");
    var $divg = $('#colors');
    for (var i = 1; i <= 40; i++) {
        $divg.append($node);
    }
});

最后我得到以下内容：

<div id="colors">
    <div></div>
</div>

有人可以告诉我发生了什么事吗？

我无法弄清楚。

Answer 1

执行var $node = $("<div></div>");时，您正在创建一个jQuery对象，其中包含一个新创建的div，它尚未在DOM中。第一次附加它，你把它放在DOM中。第二次添加它时，你移动它。（好吧，如果你把它附加到别的东西上，你会这么做，但实际上你只是把它放在同一个地方。）

如果您想要多个 div，则需要创建多个。 clone会这样做，但在该代码中，您可以直接执行此操作。

Append非常满意标记：

$( document ).ready(function() {
    var $divg = $('#colors');
    for (var i = 1; i <= 40; i++) {
        $divg.append("<div></div>");
    }
});

或者，如果首先创建元素是很重要的，因为你正在用它做事：

$( document ).ready(function() {
    var $node;
    var $divg = $('#colors');
    for (var i = 1; i <= 40; i++) {
        $node = $("<div></div>");
        $divg.append($node);
    }
});

或使用clone，但在这种情况下我可能不会：

$( document ).ready(function() {
    var $node = $("<div></div>");
    var $divg = $('#colors');
    for (var i = 1; i <= 40; i++) {
        $divg.append($node.clone());
    }
});

（请注意，从技术上讲，这会创建一个额外的div，但它很好，这并不昂贵，并且不会在任何地方添加到DOM。）

Answer 2

我不能更好地解释T.J的解释。使用clone()功能创建新的div。

$( document ).ready(function() {
    var $divg = $('#colors');
    var $node = $("<div></div>");
    for (var i = 1; i <= 40; i++) {
        $divg.append($node.clone());
    }
});

#colors div{
  border : 1px solid red;
  width : 50px;
  height : 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colors">
    <div></div>
</div>

Answer 3

我使用普通的JavaScript（我把它包装在$(function(){})中，因为我最初会编写jQuery。）因为（至少对我来说）它更容易阅读代码（加上我很糟糕）在jQuery上有太多选项让我的思绪变得懒惰。）

尽管克隆是实现目标的常用方法，但还有其他方法可以迭代创建createElement()和appendChild();

等元素

＆＃13;

$(function() {
  for (var i = 0; i < 40; i++) {
    var shade = document.getElementById('colors');
    var x = document.createElement('div');
    x.classList.add('x');
    shade.appendChild(x);
  }
});

＆＃13;

#colors {
  border: 3px inset black;
  min-height: 30px;
  max-width: 300px;
  display: table;
}
.x {
  border: 1px solid red;
  min-width: 30px;
  border-radius: 50%;
  display: table-cell;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>


<div id="colors">
  <div></div>
</div>

＆＃13;

Answer 4

将var $ node = ..转移到循环中：

$( document ).ready(function() {
    var $divg = $('#colors');
    for (var i = 1; i <= 40; i++) {
        var $node = $("<div></div>");
        $divg.append($node);
    }
});

甚至：

 $divg.append("<div></div>");

for循环中不能有多个append（）

4 个答案: