javascript - HTML - 文档本身(正文)中的appendChild()

Question

从 W3S 来看，关于什么是节点:“文档本身就是文档节点”( Source )。 appendChild() 方法的工作原理如下:node1.appendChild(node2)。如果我正确理解节点，我是否应该能够将某些内容附加到文档正文中？我尝试过 document.appendChild(...) 和 window.appendChild(...)，但没有成功。现在我必须创建一种框架，然后附加到其中(请参阅示例片段)。

如何将节点作为一个整体附加到文档中？而不是像下面的示例那样附加到新的 div 中？

function append(){
  box = document.createElement("div");
  box.style.backgroundColor = "#F00";
  box.style.width = "50px"; 
  box.style.height = "50px"; 
  document.getElementById("frame").appendChild(box); 
}

<div id="frame" style="position:absolute; top:90px; width:100px; height:100px;border-style:solid; border-width:2px; border-color:#000;"></div>

<input type=button value="Append" onClick="append()">

Answer 1

您不需要将其附加到文档中，而是需要将其附加到正文中。

将其附加到文档的问题是文档中一次只能有一个元素，当前是 body 元素。

function append(){
  box = document.createElement("div");
  box.style.backgroundColor = "#F00";
  box.style.width = "50px"; 
  box.style.height = "50px"; 
  document.body.appendChild(box); 
}

<div id="frame" style="position:absolute; top:50px; width:100px; height:100px;border-style:solid; border-width:2px; border-color:#000;"></div>

<input type=button value="Append" onClick="append()">