문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Javascript HTML DOM innerText Property======
<WRAP left notice 80%>
  * description : Javascript HTML DOM innerText Property
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-06-07
</WRAP>
<WRAP clear></WRAP>
\\
=====The source of the article==== 
[[https://www.w3schools.com/jsref/prop_node_innertext.asp|Javascript HTML DOM innerText Property]]\\

====Example====
요소의 내부 텍스트(inner text)를 가져옵니다.\\
<code javascript>
  <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>
</code>

=====Definition and Usage=====
%%innerText%% 속성은 지정된 노드 및 모든 하위 항목의 텍스트 콘텐츠를 설정하거나 반환합니다.\\
\\
%%innerText%% 속성을 설정하면 모든 자식 노드가 제거되고, 지정된 문자열을 포함하는 단일 텍스트 노드로 대체됩니다.\\
\\
**Note:** 이 속성은 %%textContent%% 속성과 비슷하지만 몇 가지 차이점이 있습니다.\\

   * %%textContent%%는 모든 요소의 텍스트 콘텐츠를 반환하는 반면, %%innerText%%는 <script> 및 <style> 요소를 제외한 모든 요소의 콘텐츠를 반환합니다.
   % %%innerText%%는 CSS로 숨겨진 요소의 텍스트를 반환하지 않습니다 (textContent는 반환).

====Example====
<code javascript>
  <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>
</code>




   
**Tip:** 요소의 %%HTML%% 콘텐츠를 설정하거나 반환하려면 innerHTML 속성을 사용하세요.\\

=====Syntax=====
노드의 텍스트 콘텐츠를 반환합니다:\\

<code javascript>
node.innerText
</code>
\\

노드의 텍스트 콘텐츠를 설정합니다:\\
<code javascript>
node.innerText = text
</code>

=====Property Values=====
| Value  ^ Type    ^ Description             ^
| text   | String  | 특정 노드의 텍스트 콘텐츠를 지정합니다.  |

=====Technical Details=====
Return Value : 노드 및 모든 자손 항목의 "렌더링된" 텍스트 콘텐츠를 나타내는 문자열

=====More Examples=====

====Example====
다음의 예제는 %%innerText, innerHTML, 그리고 textContent%% 사이의 일부 차이점을 보여줍니다.\\

<code javascript>
<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>
</code>
\\
지정된 속성을 사용하여 위의 %%<p>%% 요소의 콘텐츠를 가져옵니다.\\
\\
**%%innerText%%** 반환 : "This element has extra spacing, and contains a span element."\\
**%%innerHTML%%** 반환 : "   This element has extra spacing,   and contains <span>a span element</span>."\\
**%%textContent%%** 반환 : "   This element has extra spacing,   and contains a span element."\\

%%innerText%% 속성은 공백 및 내부 요소 태그 없이 텍스트만 반환합니다.\\
%%innerHTML%% 속성은 모든 공백 및 내부 요소 태그를 포함하여 텍스트를 반환합니다.\\
%%textContent%% 속성은 간격은 있지만 내부 요소 태그는 없는 텍스트를 반환합니다.\\



















{{tag>오션, Javascript HTML DOM innerText Property}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
