Appendchild仅适用于最后一个元素

巴罗斯

我正在尝试在JavaScript中创建一个元素,并通过类名将其应用于所有元素。在此示例中,我将使用一个段落来简化说明。但是,通过JavaScript创建元素的目的是因为稍后我想在代码中创建另一个元素。

在我使用的代码中,只有元素数组的最后一个元素将包含JavaScript创建的元素。谁能解释这是为什么发生的,我可以根据我的要求解决该问题吗?我正在尝试将整个元素应用于另一个元素(因此,不仅是段落元素的值或属性)。

我的代码:

//Creating my element:
let myElement = document.createElement("p");
/*let text = document.createTextNode("test");
myElement.appendChild(text);*/ //<-- Enable following to see text in result or check developer console for added paragraphs

//Single example:
let ele = document.getElementById("bar");
ele.appendChild(myElement);

//Not working...:

//Now class:
let eles = document.getElementsByClassName("foo");
for (i = 0; i < eles.length; i++) {
  //eles[i].innerHTML = "abc";//<-- Does work (but hardcoded)?
  //eles[i].innerHTML = myElement;//<-- returns "[object HTMLParagraphElement]"?
  eles[i].appendChild(myElement); //<!-- Does work only for last element in array?
}
<div class="foo" id="bar">

</div>
<div class="foo">

</div>

<div class="foo">

</div>

<div class="foo">
  <!-- Only this one will obtain the the paragraph element? -->
</div>

JSFiddle

亚力山大

您需要使用cloneNodeelement <p>,因为appendChild它将其从当前位置移动到新位置。查看文件

//Creating my element:
const myElement = document.createElement("p");
myElement.innerHTML = 'paragraph';

//Single example:
const ele = document.getElementById("bar");
ele.appendChild(myElement.cloneNode(true));

//Now class:
const eles = document.getElementsByClassName("foo");
for (let i = 0; i < eles.length; i++) {
  eles[i].appendChild(myElement.cloneNode(true));
}
.foo {
   border: 1px solid #333;
}

.foo p {
  font-weight: bold;
}
<div class="foo" id="bar">
  bar:
</div>
<div class="foo">
  foo1
</div>
<div class="foo">
  foo2
</div>
<div class="foo">
  foo3
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

.each()中的setInterval仅适用于最后一个间隔?

bash set -e(errexit)仅适用于管道中的最后一个命令?

当您有多个窗口时,Electron ApplicationMenu仅适用于最后一个窗口

函数仅适用于使用.each函数的最后一个div

延迟加载vimeo仅适用于数组中的最后一个

Material Components Web-mdc附加仅适用于第一个元素

MutationObserver仅适用于最后一个突变

必应地图图钉单击事件处理程序仅适用于最后一个

用jQuery添加类仅适用于第一个元素

循环内的onclick值仅适用于表中的最后一个值

array_map()仅适用于数组的第一个元素

jQuery函数仅适用于laravel中foreach的第一个元素

嵌套范围仅适用于最后一个范围

JS函数addEventListener仅适用于列表的第一个元素

jQuery HoverIntent仅适用于最后一个div

GPUImage capturePhotoAsImageProcessedUpToFilter仅适用于最后一个滤镜

我的循环仅适用于最后一个文件R

jQuery插件仅适用于最后一个选择器

Magento表单验证仅适用于组中的最后一个复选框

jQuery动画仅适用于一个元素

javascript函数仅适用于第一个元素

javascript效果仅适用于第一个元素,而不适用于其他元素?

HTML / CSS仅适用于第一个和最后一个目标

在循环中添加addEventListener()仅适用于最后一个按钮

javascript click事件仅适用于WebGrid MVC中的第一个元素

绑定仅适用于一个元素

悬停仅适用于列表的第一个元素

我的 css ::after 仅适用于最后一个元素

命令行参数仅适用于数组的第一个元素