Home
JavaScript

특정 요소의 내용을 가져오거나 변경하는 방법 - .innerHTML

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

.innerHTML

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

 

기본형 1

element.innerHTML
  • element의 내용을 가져옵니다.

예를 들어

var abc = document.getElementById( 'xyz' ).innerHTML;

은 id의 값이 xyz인 요소의 내용을 변수 abc에 저장합니다.

 

기본형 2

element.innerHTML = content;
  • 선택한 element의 내용을 content로 바꿉니다.

예를 들어

document.getElementById( 'xyz' ).innerHTML = 'ABC';

는 id의 값이 xyz인 요소의 내용을 ABC로 바꿉니다.

 

예제 1

id의 값이 xyz인 요소의 내용을 가져와서 출력합니다.

<p>Lorem</p>

<ul id="xyz">
  <li>Ipsum</li>
  <li>Dolor</li>
</ul>
<hr>
var abc = document.getElementById( 'xyz' ).innerHTML;
document.write( '<ul>' + abc + '</ul>' );

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

예제 2

id의 값이 xyz인 요소의 내용을 바꿉니다.

<p>Lorem</p>

<ul id="xyz">
  <li>Ipsum</li>
  <li>Dolor</li>
</ul>
document.getElementById( 'xyz' ).innerHTML = '<li>Dolor</li>';

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

Post a Comment