wiki:javascript:javascript_note:innerhtml

차이

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

차이 보기로 링크

--- wiki:javascript:javascript_note:innerhtml [2021/06/04 11:23]
emblim98 [Example]
+++ wiki:javascript:javascript_note:innerhtml [2023/01/13 18:44] (현재)
@@ 줄 106: / 줄 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>
@@ 줄 112: / 줄 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>
@@ 줄 118: / 줄 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>
@@ 줄 124: / 줄 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>

/var/services/web/dokuwiki/data/attic/wiki/javascript/javascript_note/innerhtml.1622773384.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)