목차
Javascript HTML DOM innerText Property
- description : Javascript HTML DOM innerText Property
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-06-07
The source of the article
Example
요소의 내부 텍스트(inner text)를 가져옵니다.
<body> <p>Click the button to get the text content of the button element.</p> <button onclick="myFunction()" id="myBtn">Try it</button> <p><strong>Note:</strong> The innerText property is not supported in Internet Explorer 9 and earlier.</p> <p id="demo"></p> <script> function myFunction() { var x = document.getElementById('myBtn').innerText; /* id="myBtn"의 inner text "Try it"을 가져와 변수 x에 대입*/ document.getElementById('demo').innerHTML = x; /* 버튼 클릭 시 변수 x (Try it)을 id="demo" 에 표시 */ } </script>
Definition and Usage
innerText 속성은 지정된 노드 및 모든 하위 항목의 텍스트 콘텐츠를 설정하거나 반환합니다.
innerText 속성을 설정하면 모든 자식 노드가 제거되고, 지정된 문자열을 포함하는 단일 텍스트 노드로 대체됩니다.
Note: 이 속성은 textContent 속성과 비슷하지만 몇 가지 차이점이 있습니다.
- textContent는 모든 요소의 텍스트 콘텐츠를 반환하는 반면, innerText는 <script> 및 <style> 요소를 제외한 모든 요소의 콘텐츠를 반환합니다.
% innerText는 CSS로 숨겨진 요소의 텍스트를 반환하지 않습니다 (textContent는 반환).
Example
<body> <h3>Differences between innerText and textContent.</h3> <p id="demo">This p element contatins a <span style="display: none">hidden span element</span> and a <span>visible span element</span>.</p> <button onclick="getTextContent()">Get textContent</button> <button onclick="getInnerText()">Get innerText</button> <p><strong>Note:</strong> The textContent property is not supported in Internet Explorer 8 and earlier, and the innerText property is not supported in IE9 and earlier.</p> <p id="demo"></p> <script> function getTextContent() { console.log(document.getElementById('demo').textContent); } /* This p element contatins a hidden span element and a visible span element. */ function getInnerText() { console.log(document.getElementById('demo').innerText); } /* This p element contatins a and a visible span element.*/ </script> </body>
Tip: 요소의 HTML 콘텐츠를 설정하거나 반환하려면 innerHTML 속성을 사용하세요.
Syntax
노드의 텍스트 콘텐츠를 반환합니다:
node.innerText
노드의 텍스트 콘텐츠를 설정합니다:
node.innerText = text
Property Values
| Value | Type | Description |
|---|---|---|
| text | String | 특정 노드의 텍스트 콘텐츠를 지정합니다. |
Technical Details
Return Value : 노드 및 모든 자손 항목의 “렌더링된” 텍스트 콘텐츠를 나타내는 문자열
More Examples
Example
다음의 예제는 innerText, innerHTML, 그리고 textContent 사이의 일부 차이점을 보여줍니다.
<body> <h3>Differnece between innerText, innerHTML, and textContent</h3> <p id="demo"> This element has extra spacing, and contains <span>a span element</span>.</p> <button onclick="getInnerText()">Get innerText</button> <button onclick="getHTML()">Get innerHTML</button> <button onclick="getTextContent()">Get textContent</button> <p><strong>Note:</strong> The textContent property is not supported in Internet Explorer 8 and earlier, and the innerText property is not supportedin IE9 and earlier.</p> <p id="demo"></p> <script> function getInnerText() { alert(document.getElementById('demo').innerText); } /* This element has extra spacing, and contains a span element. */ function getHTML() { alert(document.getElementById('demo').innerHTML); } /* This element has extra spacing, and contains <span>a span element</span>. */ function getTextContent() { alert(document.getElementById('demo').textContent); } /* This element has extra spacing, and contains a span element. */ </script> </body>
지정된 속성을 사용하여 위의 <p> 요소의 콘텐츠를 가져옵니다.
innerText 반환 : “This element has extra spacing, and contains a span element.”
innerHTML 반환 : “ This element has extra spacing, and contains a span element.”
textContent 반환 : “ This element has extra spacing, and contains a span element.”
innerText 속성은 공백 및 내부 요소 태그 없이 텍스트만 반환합니다.
innerHTML 속성은 모든 공백 및 내부 요소 태그를 포함하여 텍스트를 반환합니다.
textContent 속성은 간격은 있지만 내부 요소 태그는 없는 텍스트를 반환합니다.
