如何在手动创建的 div 下追加一个生成的 div?

How to appendChild a generated div under a manually created div?

我有一个由 javascript 库生成的 div 元素。假设它的 ID 是 auto

我手动创建了一个 HTML div 元素,ID 为 manual.

如何将生成的 div#auto 移动到 div#manual

生成的 div 元素不是文档树的一部分。 所以我不能 appendChildauto 放在 manual

有什么想法吗?

var element = document.createElement("div");
element.id = 'generated';

var el = document.getElementById('element');
console.log(el)
<div id="manual">Place #generated as child of me</div>

如您所见,我无法定位生成的 div 元素#generated,因为它不在文档树中。如果我不能 select 它,我不能将它放在 #manual 下。

在您的代码中:

var element = document.createElement("div");
element.id = 'generated';

var el = document.getElementById('element');
console.log(el)

element 已经 对元素的引用。没有理由尝试通过 getElementById 再次查找它;只需使用您拥有的参考资料。 getElementById 找不到它,因为它还不在 DOM 中。

所以只需使用 element:

var element = document.createElement("div");
element.id = 'generated';

document.querySelector("#manual").appendChild(element);
// -------------------------------------------^

那个 点,它在 DOM 和 getElementById 会找到它(不过,再一次,你不需要;你已经在 element).

中有引用

实例:(我添加了边框并给生成的 div 一些内容以明确结果是什么)

var element = document.createElement("div");
element.id = 'generated';
element.innerHTML = "generated";

document.querySelector("#manual").appendChild(element);
div {
  border: 1px solid black;
  padding: 2px;
}
<div id="manual">Place #generated as child of me</div>

请注意,生成的 div 上的 id 不需要您执行此操作。如果你有一个 不同的 理由让它有一个 id,那很好,但你不需要它:

var element = document.createElement("div");
element.innerHTML = "generated";

document.querySelector("#manual").appendChild(element);
div {
  border: 1px solid black;
  padding: 2px;
}
<div id="manual">Place generated div as child of me</div>