수동으로 생성 된 div 아래에서 생성 된 div를 appendChild하는 방법은 무엇입니까?

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에 없으므로 찾지 못합니다. 당신이 이미에 대한 참조를 가지고, 점,하지만 (는 DOM에 그리고 getElementById 그것을 발견 할 것이다, 다시, 당신이 필요로하지 않는 것이 에서

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

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

가 :

그러니 그냥 element 사용 element).

라이브 예 : 는 (I 테두리를 추가하고 그 결과가 무엇인지는 명확하게하기 위해 일부 콘텐츠 생성 사업부를 준) 필요에 대한이 없다는 것을

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>