代码之家 › 专栏 › 技术社区 › dcangulo

GetElementsByClassName和AppendChild未按预期工作

html javascript

dcangulo · 技术社区 · 7 年前

首先,解决方案必须是纯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
你好,世界
是
你好,世界
Z轴
你好,世界

实际输出:

X
你好,世界
是
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 回复 | 直到 7 年前

CertainPerformance 7 年前

您只能创建一个元素:

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

当你使用 appendChild ,如果附加的元素当前是某个其他父级(例如第一个子级)的子级 x ,当您将其附加到另一个时,它将从第一个父级中移除并附加到第二个父级。将同一元素追加到一行中的多个父元素将导致该元素仅作为最后一个父元素的子元素存在。

在每次迭代中创建一个新元素(以及在分配文本而不是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>

Taki 7 年前

你可以用 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>

I. Ahmed 7 年前

出现这种情况是因为您使用一个htmlelement引用为所有分区添加为子级。一个html子级只能添加到一个父级。所以,前两个父元素追加子元素,然后立即移除,最后只将其作为最后一个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>