JavaScript / Object / .innerText, .innerHTML
목차
.innerText
.innerText은 특정 요소의 텍스트를 가져오거나, 특정 요소의 텍스트를 변경한다.
문법 1 - 내용 가져오기
- element의 내용을 가져온다.
element.innerText
- id의 값이 xyz인 요소의 내용을 변수 jb에 저장한다.
var jb = document.getElementById( 'xyz' ).innerText;
예제 1
- id의 값이 jb인 요소의 텍스트를 가져와서 출력한다.
- 태그 등은 제외한 텍스트만 가져온다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; font-size: 20px; } </style> </head> <body> <p id="jb"><span style="color: red;">Hello</span> World!</p> <script> var jbText = document.getElementById( "jb" ).innerText; document.write( jbText ); </script> </body> </html>
문법 2 - 내용 변경하기
- 선택한 element의 내용을 content로 바꾼다.
element.innerText = content
- id의 값이 xyz인 요소의 내용을 ABC로 바꾼다.
document.getElementById( 'xyz' ).innerHTML = 'ABC';
예제 2
- id의 값이 jb인 요소의 텍스트를 Goodbye World!로 변경한다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; font-size: 20px; } </style> </head> <body> <p id="jb"><span style="color: red;">Hello</span> World!</p> <script> document.getElementById( "jb" ).innerText = 'Goodbye World!'; </script> </body> </html>
.innerHTML
.innerHTML은 특정 요소의 내용을 가져오거나, 특정 요소의 내용을 변경한다. .innerText와의 차이점은 HTML 태그 등도 포함한다는 것이다.
문법 1 - 내용 가져오기
- element의 내용을 가져온다.
element.innerHTML
- id의 값이 xyz인 요소의 내용을 변수 jb에 저장한다.
var jb = document.getElementById( 'xyz' ).innerHTML;
예제 1
- id의 값이 xyz인 요소의 내용을 가져와서 출력한다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</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 - 내용 변경하기
- 선택한 element의 내용을 content로 바꾼다.
element.innerHTML = content
- id의 값이 xyz인 요소의 내용을 ABC로 바꾼다.
document.getElementById( 'xyz' ).innerHTML = 'ABC';
예제 2
- id의 값이 xyz인 요소의 내용을 바꾼다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</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>