JavaScript 강좌 | Property > innerHTML

innerHTML은 특정 요소의 내용을 가져오거나, 특정 요소의 내용을 변경합니다.

문법

var content = element.innerHTML;

선택한 element의 내용을 content 변수에 저장합니다.

element.innerHTML = content;

선택한 element의 내용을 content로 바꿉니다.

예제 1

http://book.cmsfactory.net/JavaScript/V01/property/innerHTML-01.html

id 값이 xyz인 요소의 내용을 가져와서 출력하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript | innerHTML</title>
  </head>
  <body>
    <p>Lorem</p>
    <ul id="xyz">
      <li>Ipsum</li>
      <li>Dolor</li>
    </ul>
    <hr>
    <script>
      var jb = document.getElementById( 'xyz' ).innerHTML;
      document.write( '<ul>' + jb + '</ul>' );
    </script>
  </body>
</html>

예제 2

http://book.cmsfactory.net/JavaScript/V01/property/innerHTML-02.html

id 값이 xyz인 요소의 내용을 바꾸는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript | innerHTML</title>
  </head>
  <body>
    <p>Lorem</p>
    <ul id="xyz">
      <li>Ipsum</li>
      <li>Dolor</li>
    </ul>
    <script>
      document.getElementById( 'xyz' ).innerHTML = '<li>Dolor</li>';
    </script>
  </body>
</html>

Created on 2014-07-16 03:51 | Updated on 2015-07-18 02:40

이 글을 공유하기

Kakao

Add new comment

Guest

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
구글이 제공하는 스팸방지 기능입니다. '로봇이 아닙니다'에 체크해야 글을 등록할 수 있습니다.

Book navigation