如何在手動創建的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>