Question

我正在尝试仅使用 DOM 创建类似的内容：

<div class="parent">
     <p><div id="child1">My First Child</div></p>
     <div id="child2"><p>Second Child Node</p></div>
</div>

而且我只能像这样创建每个单独的元素：

  let div1 = document.createElement("div");
  div1.setAttribute("class", "parent");
  let div2 = document.createElement("div");
  div2.setAttribute("id", "child1");  
  div2.textContent = "My First Child";
  let div3 = document.createElement("div");
  div3.setAttribute("id", "child2");
  div3.textContent = "Second Child Node";

我的问题是：我是否可以将所有内容合二为一，以便我只需要使用 document.appendChild(div1) 或者嵌套过程是否需要在追加过程中完成。

Answer 1

body 包含单个孩子，即 div，类 parent 存储在 parentDiv 中。

parentDiv 包含 2 个孩子，即 p 和 div，id 为 child2

p 容器单子，即 div 与 ID child1

div 与 ID child2 包含单个 p

body = (p) + (div) where

p 包含 ID div

的 child1

div 与 ID child2 包含 p

const parentDiv = document.createElement("div")
parentDiv.classList.add("parent");

const p1 = document.createElement("p");
const divChild1 = document.createElement("div");
divChild1.setAttribute("id", "child1");
divChild1.textContent = "My First Child";
p1.appendChild(divChild1);

const divChild2 = document.createElement("div");
divChild2.setAttribute("id", "child2");
const p2 = document.createElement("p");
p2.textContent = "Second Child Node";
divChild2.appendChild(p2);

parentDiv.appendChild(p1);
parentDiv.appendChild(divChild2);

document.body.appendChild(parentDiv)

Answer 2

您可以通过insertAdjacentHTML来完成：

document
  .querySelector(".parent-of-parent")
  .insertAdjacentHTML('afterbegin', `
    <div class="parent">
      <p><div id="child1">My First Child</div></p>
      <div id="child2"><p>Second Child Node</p></div>
    </div>`
  );

<div class="parent-of-parent"></div>

Answer 3

也可以试试这个版本，如果你喜欢

const parentElement = document.createElement("div")
document.body.appendChild(parentElement)



parentElement.innerHTML = `
<div class="parent">
     <p><div id="child1">My First Child</div></p>
     <div id="child2"><p>Second Child Node</p></div>
</div>

`

如果您有一些动态文本并且您想在 p 标签中插入使用 ${} 这个括号，它是模板字符串，您可以将您的特定单词放在大括号内，例如像这样< /p>

cosnt text1 = "My First Child"
const text2 = "Second Child Node"


<div class="parent">
     <p><div id="child1">${text1}</div></p>
     <div id="child2"><p>${text2}</p></div>
</div>

使用 DOM 创建嵌套元素

3 个答案: