2

首先，解决方案必须是纯 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>
4

3 回答 3

4

您只创建一个元素：

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>

于 2018-06-28T02:19:09.507 回答
3

您可以使用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>

于 2018-06-28T02:23:51.887 回答
1

发生这种情况是因为您使用一个 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>

于 2018-06-28T02:20:46.520 回答