如何在手动创建的 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 元素不是文档树的一部分。
所以我不能 appendChild
把 auto
放在 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>
我有一个由 javascript 库生成的 div 元素。假设它的 ID 是 auto
我手动创建了一个 HTML div 元素,ID 为 manual
.
如何将生成的 div#auto
移动到 div#manual
?
生成的 div 元素不是文档树的一部分。
所以我不能 appendChild
把 auto
放在 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>