时间戳

首页 > 解决方案 > 使用javascript在多个相同的html元素中添加一个段落

javascript - 使用javascript在多个相同的html元素中添加一个段落

问题描述

我正在尝试<p>Hello World</P>使用 javascript 在 html 中相同的两个 div 元素中添加 。

所以我有这个 div 元素：

<div></div><div></div>

我尝试的是这样的：

let p = document.createElement('p'); p.textContent = "Hello World"; document.querySelectorAll("div").forEach((divElement) => {element.appendChild(p);})

但它只将它添加到 div 元素之一，我怎样才能让它在两个 div 元素中都有它？请不要 jquery

标签： javascripthtml

解决方案

实际上有两个问题：第一个是您为多个元素使用相同的 ID，第二个是您为多个元素创建单个 DOM 对象。您可以通过使用类并在每次要附加它时创建一个段落来解决它。

编辑：这个答案解释了为什么你不能两次附加同一个孩子：解释

document.querySelectorAll(".test").forEach((el) => {
   let p = document.createElement('p'); 
   p.textContent = "Hello World";
   el.appendChild(p);
})
<div class="test"></div>
<div class="test"></div>

推荐阅读