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

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

====Example====
%%id="demo%%를 가진 %%<p>%% 요소의 %%HTML%% 콘텐츠를 변경합니다.\\
<code javascript>
<body>

  <p id="demo" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>
  <!-- 콘텐츠를 클릭하면 Paragrahp changed!으로 변경됨 -->
  <script>
    function myFunction() {
      document.getElementById("demo").innerHTML = "Paragrahp changed!";
    }
  </script>
  
</body>
</code>

=====Definition and Usage=====
%%innerHTML%% 속성은 요소의 %%HTML%% 콘텐츠 (내부 %%HTML%%)를 설정하거나 반환합니다.\\

=====Syntax=====
%%innerHTML%% 속성을 반환합니다.\\
<code javascript>
HTMLElementObject.innerHTML
</code>
\\

%%innerHTML%% 속성을 설정합니다.\\
<code javascript>
HTMLElementObject.innerHTML = text
</code>
\\

=====Property Values=====
^ Value  ^ Description                         ^
| text   | 요소의 %%HTML%% 콘텐츠를 지정합니다  |

=====Technical Details=====
Return Value: 문자열이며, 요소의 %%HTML%%의 콘텐츠를 나타냅니다.\\

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

====Example====
%%id="myP"%%를 가진 %%<p>%% 요소의 %%HTML%% 콘텐츠를 가져옵니다.\\
<code javascript>
<body>

  <p id="myP">I am a paragraph.</p>

  <p>Click the button to get the HTML content of the p element.</p>

  <button onclick="myFunction()">Try it</button>

  <p id="demo"></p> <!-- 버튼을 클릭하면 I am a paragraph.가 나타남 -->

  <script>
    function myFunction() {
      var x = document.getElementById("myP").innerHTML;/* I am a paragraph. */
      document.getElementById("demo").innerHTML = x;
    }
  </script>

</body>
</code>

====Example====
%%id="myList"%%를 가진 %%<ul>%% 요소의 %%HTML%% 콘텐츠를 가져옵니다.\\
<code javascript>
<body>

  <ul id="myList">
    <li>Coffee</li>
    <li>Tea</li>
  </ul>

  <p>Click the button to get the HTML content of the ul element.</p>

  <button onclick="myFunction()">Try it</button>

  <p id="demo"></p>

  <script>
    function myFunction() {
      var x = document.getElementById("myList").innerHTML;
      /* 변수 x에 myList ul 목록을 대입*/
      document.getElementById("demo").innerHTML = x;
      /* #demo에 myList ul 목록을 출력함 */
    }
  </script>

</body>
</code>

====Example====
두 개 요소의 %%HTML%% 콘텐츠를 변경합니다.\\
<code javascript>
<body>

  <h1>My Web Page</h1>

  <p id="myP">This is a p element</p><!-- Hello Dolly로 변경됨-->

  <div id="myDIV">This is a div element</div><!-- How are you?로 변경됨 -->

  <script>
    document.getElementById("myP").innerHTML = "Hello Dolly";
    document.getElementById("myDIV").innerHTML = "How are you?";
  </script>

</body>
</code>

====Example====
%%id="demo"%%를 가진 %%<p>%% 요소의 %%HTML%% 콘텐츠를 경고합니다.\\
<code javascript>
<body>

  <p id="demo">Click the button to alert the text of this paragrahp.</p>

  <button onclick="myFunction()">Try it</button>

  <script>
    function myFunction() {
      alert(document.getElementById("demo").innerHTML);
    }/* 버튼을 클릭하면 #demo의 내용이 표시된 알림창이 나타남 */
  </script>

</body>
</code>

====Example====
%%id="demo"%%를 가진 %%<p>%% 요소의 %%HTML%% 콘텐츠를 삭제합니다.\\
<code javascript>
<body>

  <p id="demo">Click the button to delete my HTML content (innerHTML).</p>

  <button onclick="myFunction()">Try it</button>

  <script>
    function myFunction() {
      document.getElementById("demo").innerHTML = "";
    }/* 버튼을 클릭하면 #demo의 내용이 삭제됨 */
  </script>

</body>
</code>

====Example====
%%HTML%% 콘텐츠, URL, 그리고 타겟 링크를 변경합니다.\\
<code javascript>
<body>

  <a href="http://www.microsoft.com" id="myAnchor">Microsoft</a>
  <button onclick="myFunction()">Change link</button>

  <script>
    function myFunction() {
      document.getElementById("myAnchor").innerHTML = "W3Schools";
      /* Microsoft가 W3Schools로 변경됨*/
      document.getElementById("myAnchor").href = "https://www.w3schools.com";
      document.getElementById("myAnchor").target = "_blank";
      /* link가 https://www.w3schools.com으로 변경되고, 버튼 클릭 시 새창에서 열림 */

    }
  </script>

</body>

</code>

































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

사용자 도구

사이트 도구

문서 도구
