创建 div & 然后在其中创建 div

Question

我可以使用以下语法创建一个新的 div：

function createClass() {
 const firstDiv = document.createElement('div')
 firstDiv.classList.add('class1')
 container.appendChild(firstDiv)
}

接下来我想在那个 div 中创建一个新的 div。 我尝试了相同的语法但没有成功：

function createClass() {
 const firstDiv = document.createElement('div')
 firstDiv.classList.add('class1')
 container.appendChild(firstDiv)

 const secondDiv = document.createElement('div')
 secondDiv.classList.add('class2')
 firstDiv.appendChild(secondDiv)
}

如果我使用以下语法，它可以工作，但是有一个问题。 如果 function 被多次执行，它只会创建第二个 class 一次。 因此，如果执行两次，结果将是：

<div class="class1"><div class="class2"></div></div>
<div class="class1"></div></div>

document.getElementsByClassName('class1')[0].appendChild(secondDiv)

有什么帮助吗？

Answer 1

您的代码不包括将动态 HTML 附加到文档中。 但完成后，output 就如预期的那样。

 let container = document.getElementById("container"); function createClass() { const firstDiv = document.createElement('div') firstDiv.classList.add('class1') container.appendChild(firstDiv) const secondDiv = document.createElement('div') secondDiv.classList.add('class2') firstDiv.appendChild(secondDiv) // Your post doesn't include appending the first div to the document container.appendChild(firstDiv); } createClass(); createClass(); console.log(container.innerHTML);

 <div id="container"></div>