javascript - 在 for 循环中追加项目 - jquery

Question

我正在通过 Javascript 添加一个简单的切换按钮。然后我想在里面添加三个 span 标签。

因此，我正在创建 span 变量并尝试将其附加到我们自己的基本 FOR 循环中。迭代次数为 3 次。

下面是我的基本代码。请让我知道我的 span 标签拒绝多次附加的内容丢失或放错了地方。我在检查模式下检查了这个。

然后，我调出控制台选项卡，i 的值为 3。附加的意思是附加，而不是替换 元素。对吧？

var $navbar_header = $('<div class="navbar-header"></div>');

var $button = $("<button></button>");
var $span = $('<span class="icon-bar"></span>');

for (var i = 0; i < 3; i++) {
   $button.append($span);
 }

$button.addClass('navbar-toggle');
$navbar_header.append($button);
$("#menu").append($navbar_header);

这是一个 link摆弄。

Answer 1

DOM 是一棵树，其中任何元素都指向其父元素(参见 parentNode )。一个元素只能有一个位置。因此，当您追加一个元素时，您会将其从其先前位置移除。

这里的解决方案是克隆元素:

$button.append($span.clone());

或者只是在循环中创建它:

for (var i = 0; i < 3; i++) {
    $button.append('<span class="icon-bar"></span>');
}