javascript - getElementsByClassName 和 appendChild 未按预期工作

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属性)

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>