목차

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

Javascript HTML DOM innerText Property

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 속성과 비슷하지만 몇 가지 차이점이 있습니다.

% 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 속성은 간격은 있지만 내부 요소 태그는 없는 텍스트를 반환합니다.

, , , , ,