如何在手动创建的div下追加生成的div？

Question

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

而且我手动创建了一个ID为manual的HTML div元素。

如何将生成的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，因为它不是在文档树。如果我不能选择它，我不能把它放在#manual下。

Answer 1

在您的代码：

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>