[JS] HTML에 <li> 태그 생성하고 태그의 텍스트 바꾸기

아래 두 코드는 완전히 결과가 동일하다.

 

1.

// <li> 태그를 생성한다.
var li = document.createElement("li");

// <li>'Home'이라는 내용을 갖는 텍스트 노드를 생성해서 <li> 태그 아래 붙인다.
li.appendChild(document.createTextNode('Home'));

 

2. 

// <li> 태그를 생성한다.
var li = document.createElement("li");

// 생성한 <li> 태그 내부의 텍스트를 "Home"으로 변경한다.
li.innerText = "Home";

 

위 두 코드는 완전히 결과가 동일하다.

1번은 텍스트 노드를 따로 만들어서 <li>아래 갖다붙이니 좀 더 복잡하고

2번은 그냥 심플하게 <li> 내부 텍스트를 바꾼다. 결과는 차이가 없다.