wiki:javascript:javascript_note:innerhtml
목차
Javascript HTML DOM innerHTML Property
- description : Javascript HTML DOM innerHTML Property
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-06-04
The source of the article
Example
id="demo를 가진 <p> 요소의 HTML 콘텐츠를 변경합니다.
<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>
Definition and Usage
innerHTML 속성은 요소의 HTML 콘텐츠 (내부 HTML)를 설정하거나 반환합니다.
Syntax
innerHTML 속성을 반환합니다.
HTMLElementObject.innerHTML
innerHTML 속성을 설정합니다.
HTMLElementObject.innerHTML = text
Property Values
| Value | Description |
|---|---|
| text | 요소의 HTML 콘텐츠를 지정합니다 |
Technical Details
Return Value: 문자열이며, 요소의 HTML의 콘텐츠를 나타냅니다.
More Examples
Example
id="myP"를 가진 <p> 요소의 HTML 콘텐츠를 가져옵니다.
<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>
Example
id="myList"를 가진 <ul> 요소의 HTML 콘텐츠를 가져옵니다.
<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>
Example
두 개 요소의 HTML 콘텐츠를 변경합니다.
<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>
Example
id="demo"를 가진 <p> 요소의 HTML 콘텐츠를 경고합니다.
<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>
Example
id="demo"를 가진 <p> 요소의 HTML 콘텐츠를 삭제합니다.
<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>
Example
HTML 콘텐츠, URL, 그리고 타겟 링크를 변경합니다.
<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>
/volume1/web/dokuwiki/data/pages/wiki/javascript/javascript_note/innerhtml.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
