HTML DOM createTextNode() 메서드 – 텍스트 노드 생성 방법

HTML DOM의 createTextNode() 메서드는 지정한 텍스트를 포함하는 텍스트 노드(Text Node)를 새로 생성할 때 사용됩니다.

기본 문법

createTextNode()는 document 객체의 메서드이며, 매개변수로 문자열을 전달하면 해당 텍스트를 담고 있는 새로운 텍스트 노드를 반환합니다.

예제

createTextNode() 메서드의 사용 예시를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h2>createTextNode() 예제</h2>
<p>아래 버튼을 클릭하면 텍스트가 포함된 p 요소가 생성됩니다.</p>
<button onclick="createText()">CREATE</button>
<script>
   function createText() {
      var x = document.createElement("P");
      var p = document.createTextNode("This is a sample paragraph created with
      createTextNode()");
      x.appendChild(p);
      document.body.appendChild(x);
   }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM createTextNode() 메서드 – 텍스트 노드 생성 방법

CREATE 버튼을 클릭하면 다음과 같이 결과가 표시됩니다.

HTML DOM createTextNode() 메서드 – 텍스트 노드 생성 방법

코드 설명

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

먼저, 사용자가 클릭하면 createText() 함수를 실행하는 CREATE 버튼을 만들었습니다.

<button onclick="createText()">CREATE</button>

createText() 함수 내부에서는 먼저 document 객체의 createElement() 메서드를 사용하여 <p> 요소를 생성한 뒤 변수 x에 할당합니다. 이어서 createTextNode() 메서드로 텍스트를 포함한 텍스트 노드를 생성하고 변수 p에 저장합니다.

그다음 appendChild() 메서드를 사용해 생성된 텍스트 노드를 <p> 요소에 추가합니다. 마지막으로 document.body에 appendChild()를 호출하여 텍스트 노드가 포함된 <p> 요소 전체를 문서에 추가합니다.

function createText() {
   var x = document.createElement("P");
   var p = document.createTextNode("This is a sample paragraph created with createTextNode()");
   x.appendChild(p);
   document.body.appendChild(x);
}

정리

createTextNode() 메서드는 동적으로 콘텐츠를 생성할 때 createElement()와 함께 자주 사용되는 핵심 DOM API입니다. 요소를 먼저 만들고, 그 안에 들어갈 텍스트 노드를 생성한 후 appendChild()로 연결하는 방식으로 활용됩니다. 이러한 패턴은 버튼 클릭, AJAX 응답 처리 등 사용자 인터랙션에 따라 실시간으로 화면을 갱신해야 하는 다양한 상황에서 유용하게 적용할 수 있습니다.