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>');
}

在for循环中附加项目jquery

1 个答案: