차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:javascript:javascript_note:innerhtml [2021/06/04 09:27]
emblim98 만듦
+++ wiki:javascript:javascript_note:innerhtml [2023/01/13 18:44] (현재)
@@ 줄 12: / 줄 12: @@
 ====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>

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

사용자 도구

사이트 도구

차이

문서 도구