Question

首先，解决方案必须是纯VanillaJS。

我有一个简单的HTML代码。

<div class="x">X</div>
<div class="x">Y</div>
<div class="x">Z</div>

还有VanillaJS代码。

document.addEventListener('DOMContentLoaded', function() {
    var l = document.createElement('div');
    l.innerHTML = "Hello World";
}, false);

当我尝试运行以下代码时：

document.getElementsByClassName('x')[0].appendChild(l);

我得到了输出

X
Hello World
Y
Z

从技术上讲，这是正确的。但是，每当我尝试追加到数组的另一个成员时，它都无法按预期工作。

我尝试过：

document.getElementsByClassName('x')[0].appendChild(l);
document.getElementsByClassName('x')[1].appendChild(l);
document.getElementsByClassName('x')[2].appendChild(l);

期望的输出：

X
Hello World
Y
Hello World
Z
Hello World

实际输出

X
Y
Z
Hello World

根据我的观察，仅考虑代码的最后一行。控制台中没有错误，只是无法正常工作。

我尝试了另一种重新排列数组顺序的方案。

document.getElementsByClassName('x')[1].appendChild(l);
document.getElementsByClassName('x')[2].appendChild(l);
document.getElementsByClassName('x')[0].appendChild(l);

期望的输出：

X
Hello World
Y
Hello World
Z
Hello World

实际输出：

X
Hello World
Y
Z

如您所见，仅考虑最后一个追加，而不会追加到具有相同类名的其他元素上。

我也尝试循环播放它们，仍然没有运气。

完整代码：

<div class="x">X</div>
<div class="x">Y</div>
<div class="x">Z</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
   var l = document.createElement('div');
    l.innerHTML = "Hello World";

    document.getElementsByClassName('x')[0].appendChild(l);
    document.getElementsByClassName('x')[1].appendChild(l);
    document.getElementsByClassName('x')[2].appendChild(l);
}, false);
</script>

Answer 1

您只能创建一个元素：

var l = document.createElement('div');

使用appendChild时，如果附加元素当前是某个其他父元素的子元素（例如第一个x），则在将其附加到另一个元素时，该元素将从其第一个父元素中删除，并且附加到第二个。将同一元素连续添加到多个父元素中，将导致该元素仅作为最后一个父元素的子元素存在。

请在每次迭代中创建一个新元素（并且在分配 text 而不是HTML时，请确保分配给textContent属性而不是innerHTML属性）< / p>

document.querySelectorAll('.x').forEach((x) => {
  var l = document.createElement('div');
  l.textContent = "Hello World";
  x.appendChild(l);
});

<div class="x">X</div>
<div class="x">Y</div>
<div class="x">Z</div>

Answer 2

您可以使用cloneNode附加所创建元素的副本：

document.addEventListener('DOMContentLoaded', function() {
  var l = document.createElement('div');
  l.innerHTML = "Hello World";

  document.getElementsByClassName('x')[0].appendChild(l.cloneNode(true));
  document.getElementsByClassName('x')[1].appendChild(l.cloneNode(true));
  document.getElementsByClassName('x')[2].appendChild(l.cloneNode(true));
}, false);

<div class="x">X</div>
<div class="x">Y</div>
<div class="x">Z</div>

Answer 3

发生这种情况是因为您使用了一个HTMLElement引用将所有div添加为子级。一个html子代只能添加到一个父代。因此，首先有两个父项将child附加到子元素上，然后立即将其删除，最后仅将其添加为last div的子元素。

我为所有div创建了3个不同的孩子。请检查以下代码段：

<div class="x">X</div>
<div class="x">Y</div>
<div class="x">Z</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
   var l1 = document.createElement('div');
    l1.innerHTML = "Hello World";
    var l2 = document.createElement('div');
    l2.innerHTML = "Hello World";
    var l3 = document.createElement('div');
    l3.innerHTML = "Hello World";

    document.getElementsByClassName('x')[0].appendChild(l1);
    document.getElementsByClassName('x')[1].appendChild(l2);
    document.getElementsByClassName('x')[2].appendChild(l3);
}, false);
</script>

getElementsByClassName和appendChild无法按预期工作

3 个答案: