开发者问题收集

getElementsByClassName 和 appendChild 未按预期工作

2018-06-28
2798
javascript html

首先，解决方案必须是纯 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>
3个回答

您只能创建一个元素： 

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>
CertainPerformance
2018-06-28

您可以使用 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>
Taki
2018-06-28

发生这种情况的原因是，您使用一个 HTMLElement 引用来添加所有 div 的子元素。一个 html 子元素只能添加到一个父元素。因此，前两个父元素附加子元素，然后立即移除，最后将其添加为最后一个 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>
I. Ahmed
2018-06-28