使用DOM创建嵌套元素

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

您可以通过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 2

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

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

p容器单个子级，即id为child1的div

id为child2的div包含单个p

---

body=(p(+(div(其中

p包含id为child1的div

id为child2的div包含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)