HTML

Question

来自 W3S，关于什么是节点：“文档本身是一个文档节点”（Source）。 appendChild() 方法据说是这样工作的：node1.appendChild(node2)。如果我对节点的理解是正确的，难道我不能将某些内容附加到文档正文中吗？ document.appendChild(...) 和 window.appendChild(...) 都试过了，都不行。现在我必须创建一种框架，然后附加到其中（参见示例片段）。

如何将 node 作为一个整体附加到文档中？而不是像下面的示例那样附加到新的 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

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

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

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()">

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

HTML - appendChild() in document itself (body)

javascript

appendchild