자바스크립트 createTextNode() 함수 – 새로운 텍스트 노드를 생성

`Document.createTextNode()` 사용법

createTextNode() 함수는
지정한 문자열로 텍스트 노드 객체를 생성해서 반환합니다.

노드
HTML DOM은 노드의 집합체입니다.
HTML에서 말하는 요소는 "요소 노드"를 의미하며,
텍스트는 "텍스트 노드",
주석은 "주석 노드"라고 말합니다.

createTextNode() 함수로 생성된 텍스트 객체는 아직 DOM에 추가되지 않은 상태이며, 원하는 위치에 직접 추가(혹은 삽입)해야 웹 페이지에서 표시됩니다.

구문

매개변수

createTextNode() 함수의 매개변수
`data`	생성하는 텍스트 노드에 사용할 문자열입니다.

반환 값

생성된 텍스트 노드 객체입니다.

이 함수는 텍스트를 삽입하는 목적으로 사용됩니다.
이때 삽입하는 텍스트에 HTML 태그가 포함되어 있으면 자동으로 이스케이프 처리되어 사람이 볼 수 있는 텍스트로 변환됩니다. 주의할 예제를 참고하세요!

HTML 태그를 이스케이프 처리한다는 것은 예를 들어, < 기호는 HTML의 시작 태그로 인식되기 때문에, <라는 기호만을 그대로 기재하면 브라우저에서의 표시에 문제가 생기거나 표시되지 않거나 합니다. 이것을 이스케이프 처리하면 HTML의 특수 문자로 해당하는 기호로 변환해서 사람이 볼 수 있게 한다는 것을 의미합니다.
HTML 특수 문자 사용법과 의의 – 예약된 문자와의 충돌을 피하며 웹 콘텐츠 작성하기를 참고하세요!

예제

다음은 createTextNode()로 생성한 텍스트 노드를 <div> 요소의 자식으로 추가하는 예제입니다.

HTML

<div id="my-div" style="border: 1px solid red; margin-bottom: 1em;">
    Content
</div>

<button type="button" id="insert-btn">div에 텍스트 노드 추가하기</button>

JavaScript

const btn = document.getElementById("insert-btn");          

btn.addEventListener("click", () => {
    // 부모 요소 노드
    const myDiv = document.getElementById("my-div");

    if (myDiv) {
        // 자식으로 추가할 텍스트 노드
        const newText = document.createTextNode("😃 텍스트 노드");

        // div 안쪽 끝 부분, 즉 마지막 자식으로 추가
        myDiv.appendChild(newText);
    }
});

코드 부연설명
appendChild() 함수는 노드를 특정 노드의 마지막 자식으로 추가합니다.

주의할 예제

createTextNode() 함수는 텍스트 노드를 생성하기 때문에 생성하는 문자열에 HTML 태그가 포함되어 있으면 자동으로 이스케이프 처리되어 사람이 볼 수 있는 텍스트로 변환됩니다.

HTML

<div id="my-div" style="border: 1px solid red; margin-bottom: 1em;">
    Content
</div>

<button type="button" id="insert-btn">div에 텍스트 노드 추가하기</button>

코드 부연설명
appendChild() 함수는 노드를 특정 노드의 마지막 자식으로 추가합니다.

JavaScript

const btn = document.getElementById("insert-btn");          

btn.addEventListener("click", () => {
    // 부모 요소 노드
    const myDiv = document.getElementById("my-div");

    if (myDiv) {
        // 자식으로 추가할 HTML 태가가 포함되어 있는 텍스트 노드
        const newText = document.createTextNode("<p>새로운 텍스트</p>");

        // div 안쪽 끝 부분, 즉 마지막 자식으로 추가
        myDiv.appendChild(newText);
    }
});