[JavaScript] innerText VS appendChild

 

텍스트를 추가할 때 사용하는 코드로는 innerText와 appendChild 가 있다.

 

1. innerText 의 동작

- 요소의 텍스트 내용을 덮어씌우는 방식으로 작동

- 기존에 있는 내용을 지우고 새로운 텍스트로 대체

매번 같은 text만 표시되고 이전에 추가된 텍스트는 사라지게 됨.

 

2. appendChild 의 동작

- 기존의 내용은 유지되고, 새로운 요소를 추가

- DOM 요소를 생성하고, 이를 부모 요소에 추가하는 데 사용

> 그리하여 document.createElement("p") 로 새로운 요소 <p>를 생성 후 

  result.append(text) 하여야 #result에 새로운 요소를 추가할 수 있다.

 

3. innerText에도 텍스트를 계속 추가하는 방법

계속해서 텍스트를 추가할 수도 있다. 하지만 이는 누적되었다고 표현하는 것이 이해하기 쉬울 것이다.

    function addtext(event) {

      event.preventDefault();

   

      // 기존 텍스트에 "Hello" 추가

      result.innerText += " Hello";

    }

 

실제 결과값은

Hello
Hello Hello
Hello Hello Hello

이런식으로 출력될 것이다.

---

따라서 결론은

- 요소 추가가 필요하면 appendChild를 사용하고

- 단순 텍스트 누적이 필요하면 innerText를 사용하면 된다.