이전글
DOM 객체 innerHTML 속성
DOM 객체에는 innerHTML이란 속성이 존재합니다. 이속성은 DOM 요소에 대응되는 태그의 내부 HTML을 가리킵니다. 예를들어 다음과 같은 HTML 소스가 있다고 가정합니다.
|
1
2
3
4
5
6
7
8 |
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Dom</h1>
</body>
</html> |
cs |
여기서 body의 innerHTML은 <h1>Dom></h1> 입니다.
|
1
2
3
4
5
6 |
<script>
window.onload = function () {
var inner = document.body.innerHTML;
console.log(inner); //<h1>Dom</h1>
}
</script> |
cs |
그리고 h1 태그의 innerHTML값은 Dom 입니다.
|
1
2
3
4
5
6
7 |
<script>
window.onload = function () {
var h1_Tags = document.body.getElementsByTagName('h1');
var inner = h1_Tags[0].innerHTML;
console.log(inner); //Dom
}
</script> |
cs |
innerHTML 속성을 통한 DOM 조작하기
innerHTML 속성은 내부 HTML을 문자열로 가지고 있기 때문에 DOM을 쉽게 조작할 수 있습니다.
|
1
2
3
4
5
6 |
<script>
window.onload = function () {
var innerText = '<p><h1>제목</h1> 본문</p>'
document.body.innerHTML = innerText;
}
</script> |
cs |
'JavaScript' 카테고리의 다른 글
| [자바스크립트] 자바스크립트 DOM 요소 제거하기 (0) | 2018.06.08 |
|---|---|
| [자바스크립트] DOM 객체 스타일(style) 변경하기 (0) | 2018.06.08 |
| [자바스크립트] DOM 노드 ID, 태그명, name 속성으로 탐색하기 (0) | 2018.05.31 |
| [자바스크립트] DOM이란? DOM 개념 및 자바스크립트 DOM 다루기 (0) | 2018.05.31 |
| [자바스크립트] Date 객체 (0) | 2017.11.13 |
도로락
IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그