wiki:javascript:javascript_note:createtextnode
목차
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
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>
/var/services/web/dokuwiki/data/pages/wiki/javascript/javascript_note/createtextnode.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
