목차

Javascript HTML DOM createTextNode() Method

  • description : Javascript HTML DOM createTextNode() Method
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-06-03


The source of the article

Javascript HTML DOM createTextNode() Method

Example

텍스트 노드를 생성합니다.

<body>
 
  <p>Click the button to create a Text Node.</p>
 
  <button onclick="myFunction()">Try it</button>
 
  <script>
    function myFunction() {
      var t = document.createTextNode("Hello World");
      document.body.appendChild(t);
      /* 버튼 옆에  Hello World 생성됨. */
    }
  </script>
 
</body>


HTML 요소는 종종 요소 노드(element node)와 텍스트 노드(text node)로 구성됩니다.

헤더(예:<h1>)를 생성하려면, <h1> 요소와 텍스트 노드를 모두 생성해야 합니다.

Example

텍스트가 있는 <h1> 요소를 생성합니다.

<body>
 
  <p>Click the button to create a h1 element with some text.</p>
 
  <button onclick="myFunction()">Try it</button>
 
  <script>
    function myFunction() {
      var h = document.createElement("H1"); /* Create a <h1> element */
      var t = document.createTextNode("Hello World"); /* Create a text node */
      h.appendChild(t); /* Append the text to <h1> */
      document.body.appendChild(h); /* <h1>Hello World</h1> */
    }
  </script>
 
</body>

Definition and Usage

createTextNode() 메서드는 지정된 텍스트로 텍스트 노드를 만듭니다.

Tip: createElement() 메서드를 사용하여 지정된 이름을 가진 요소 노드를 만듭니다.

Tip: 텍스트 노드가 생성된 후, element.appendChild() 또는 element.insertBefore() 메서드를 사용하여 텍스트 노드를 요소에 추가합니다.

Syntax

document.createTextNode(text)

Parameter Values

Parameter Type Description
text String 필수입니다. 텍스트 노드의 텍스트

Technical Details

Return Value: 생성된 텍스트 노드를 가진 텍스트 노드 객체

More Examples

Example

텍스트가 있는 <p> 요소를 생성합니다:

<head>
  <style>
    #myDIV {
      border: 1px solid #000;
      margin-bottom: 10px;
    }
  </style>
</head>
 
<body>
 
  <p>Click the button to create a p element with some text, and append it to DIV</p>
 
  <div id="myDIV">
    A DIV element
  </div>
 
  <button onclick="myFunction()">Try it</button>
 
  <script>
    function myFunction() {
      var para = document.createElement("P"); /* Create a <p> element */
      para.innerHTML = "This is a paragraph.";  /* Create a text node */
      document.getElementById("myDIV").appendChild(para);/* Append the text to <p> */
    }
  </script>
 
</body>