차이

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

--- wiki:javascript:javascript_note:innerhtml [2021/06/04 10:36]
emblim98
+++ wiki:javascript:javascript_note:innerhtml [2023/01/13 18:44] (현재)
@@ 줄 55: / 줄 55: @@
 %%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>
@@ 줄 61: / 줄 78: @@
 %%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>
@@ 줄 67: / 줄 106: @@
 두 개 요소의 %%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>
@@ 줄 73: / 줄 125: @@
 %%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>
@@ 줄 79: / 줄 143: @@
 %%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>
@@ 줄 85: / 줄 161: @@
 %%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

사용자 도구

사이트 도구

차이

문서 도구