텍스트 노드를 생성합니다.
<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> 요소와 텍스트 노드를 모두 생성해야 합니다.
텍스트가 있는 <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>
createTextNode() 메서드는 지정된 텍스트로 텍스트 노드를 만듭니다.
Tip: createElement() 메서드를 사용하여 지정된 이름을 가진 요소 노드를 만듭니다.
Tip: 텍스트 노드가 생성된 후, element.appendChild() 또는 element.insertBefore() 메서드를 사용하여 텍스트 노드를 요소에 추가합니다.
document.createTextNode(text)
| Parameter | Type | Description |
|---|---|---|
| text | String | 필수입니다. 텍스트 노드의 텍스트 |
Return Value: 생성된 텍스트 노드를 가진 텍스트 노드 객체
텍스트가 있는 <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>