javascript - 在 JavaScript 中构建由“createElement”创建的 div

Question

HTML 中的 div 结构如下所示：

<div id="parentdiv">
     <div id="childdiv"></div>
</div>

下面的代码创建了 2 个 div，但将子 div 放在父 div 旁边，而不是在其中：

var pardiv = document.createElement('pardiv');
pardiv.setAttribute('id', "workspace");
pardiv.innerHTML = "Hello World";
pardiv.style.background = "red";
pardiv.width = 300;
pardiv.height = 300;
document.body.appendChild(pardiv);

var childdiv = document.createElement('childdiv');
    childdiv.setAttribute('id', "childdiv");
    childdiv.innerHTML = "Hello World";
    childdiv.style.background = "yellow";
    childdiv.width = 100;
    childdiv.height = 100;
    document.body.appendChild(childdiv);

如果它们是通过 JavaScript 创建的，程序员如何在 HTML 中构造 div？

Answer 1

不要将 childDiv 附加到正文，而是将其附加到父元素，如下所示：

pardiv.appendChild(childdiv);

使用它，您应该能够设置与在 HTML 中相同的结构。