에 appendChild

Question

내가이 HTML이 예상대로 작동하지 :

<ul id="ulref"> 
    <li>Joe</li> 
    <li>Fred</li> 
    <li>Steve</li> 
</ul> 

을하고이 JS :

그래서

ipDOM=document.getElementById("ulref"); 
x = document.createElement('LI'); 
y = document.createTextNode("hello"); 
z = x.appendChild(y); 
ipDOM.appendChild(z); 

은 "안녕하세요"새로운 LI의 하위 TextNode해야한다, 내가 생각하고 대신에 LI와 TextNode는 모두 부모 UL의 직접적인 자식 (형제)으로 나타납니다. 나는에 JS을 변경하는 경우에는 :

ipDOM=document.getElementById("ulref"); 
x = document.createElement('LI'); 
y = document.createTextNode("hello"); 
ipDOM.appendChild(x).appendChild(y); 

와 Z 스테이지를 놓치지 내가 원하는대로 LI는 UL과 Textnode의 자식 LI의 자식이다.

내가 예상 한대로 첫 번째 방법이 작동하지 않는 이유는 무엇입니까? 나는 LI와 자식 TextNode를 미리 구축하고 그 쌍을 ipDOM에 넣고있다. 그렇지 않은가?

Answer 1

Node.appendChild은 노드에 추가 된 자식을 반환합니다.
당신이 ul에 추가 li에 텍스트 노드를 추가 그래서 후

ipDOM=document.getElementById("ulref"); 
x = document.createElement('LI'); 
y = document.createTextNode("hello"); 
x.appendChild(y); // append the text node to the li 
ipDOM.appendChild(x); //append the li to the ul 

합니다 ( li에서 제거)