Question

我使用javascript创建了一个元素，并希望将新创建的元素添加到DOM元素数组中。我有以下代码，但是新元素仅添加到数组的最后一个元素。

您只能添加一次创建的元素，还是代码有问题？

var newElement = document.createElement('a');
newElement.setAttribute("href", "#somewhere");
newElement.innerHTML = 'click me';
$('.tag').each(function() { this.appendChild(newElement); });

.tag {
  width: 100px;
  height: 50px;
  padding: 10px;
  float: left;
  background: #333;
  margin: 20px;
}

a {
  background: #fff;
  color #333;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tag"></div>
<div class="tag"></div>

Answer 1

在追加之前在节点上调用cloneNode()，否则单数元素将从其在DOM中的先前位置删除：

var newElement = document.createElement('a');
newElement.setAttribute("href", "#somewhere");
newElement.innerHTML = 'click me';
$('.tag').each(function() { this.appendChild(newElement.cloneNode()); });

.tag {
  width: 100px;
  height: 50px;
  padding: 10px;
  float: left;
  background: #333;
  margin: 20px;
}

a {
  background: #fff;
  color #333;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tag"></div>
<div class="tag"></div>

（如果需要，您还可以在循环中创建元素）

向X个不同的DOM元素添加新元素

1 个答案: