Как appendChild сгенерированный div под созданным вручную div?

Question

У меня есть элемент div, который генерируется библиотекой javascript. Предположим, что ID для него auto

И я вручную создал элемент div HTML с идентификатором 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, потому что это не в дереве документа. Если я не могу выбрать его, я не могу разместить его под #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>

Обратите внимание, что нет никакой необходимости id на сгенерированном div, чтобы вы это сделали. Если у вас есть причина разных для него, имеющего 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>