☆ 이전보다 좀 더 편리한 방법!
innerHTML
* 문자열로 자식노드를 만들거나 자식노드의 값을 읽어오는 기능을 제공한다.
- 예제 >실행 화면 링크<
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> </head> <body> <ul id="list"> <li>HTML</li> <li>CSS</li> </ul> <input type="button" onclick="get();" value="get" /> <input type="button" onclick="set();" value="set" /> <script> function get(){ var a = document.getElementById('list'); // 해당 아이디의 자식노드 값 반환 alert(a.innerHTML); } function set(){ var a = document.getElementById('list'); a.innerHTML = "<li>JavaScript Core</li><li>BOM</li><li>DOM</li>"; //자식노드를 만든다. } </script> </body> </html>
outerHTML
* 해당 엘리먼트를 포함하여 처리된다
- 예제 >실행 화면 링크<
<ul id="list"> <li>HTML</li> <li>CSS</li> </ul> <input type="button" onclick="get();" value="get" /> <input type="button" onclick="set();" value="set" /> <script> function get(){ var list = document.getElementById('list'); alert(list.outerHTML); // 해당 아이디를 가진 엘리먼트를 포함하여 자식노드와 반환 } function set(){ var list = document.getElementById('list'); list.outerHTML = "<ol><li>JavaScript Core</li><li>BOM</li><li>DOM</li></ol>"; } </script>
innerText, outerText
* 값을 읽을 때는 HTML 코드를 제외한 문자열을 반환한다.
* 값을 변경 시에는 HTML 코드를 그대로 추가한다.
- 예제 >실행 화면 링크<
<ul id="list">
<li>HTML</li>
<li>CSS</li>
</ul>
<input type="button" onclick="inget();" value="inget" />
<input type="button" onclick="outget();" value="outget" />
<input type="button" onclick="set();" value="set" />
<script>
function inget(){
var list = document.getElementById('list');
alert(list.innerText);
}
function outget(){
var list = document.getElementById('list');
alert(list.outerText);
}
function set(){
var list = document.getElementById('list');
list.innerText = "<li>JavaScript Core</li><li>BOM</li><li>DOM</li>";
}
</script>innetHTML innerText
insertAdjacentHTML()
* 좀 더 정교하게 문자열을 이용한 노드 제어를 할 때 사용한다.
* 첫 번째 인자로 삽입할 위치를 전달하고, 두번째 인자로는 추가하려는 HTML 코드를 넘겨준다.
- beforebegin : 해당 엘리먼트의 등장 직전
- afterbegin : 해당 엘리먼트가 시작된 직후
- beforeend : 해당 엘리먼트가 끝나지 직전
- afterend : 해당 엘리먼트가 끝난 직후
- 예제 >실행 화면 링크<
<ul id="list">
<li>CSS</li>
</ul>
<input type="button" onclick="beforebegin();" value="beforebegin" />
<input type="button" onclick="afterbegin();" value="afterbegin" />
<input type="button" onclick="beforeend();" value="beforeend" />
<input type="button" onclick="afterend();" value="afterend" />
<script>
function beforebegin(){
var list = document.getElementById('list');
list.insertAdjacentHTML('beforebegin','<h1>Client Side</h1>');
}
function afterbegin(){
var list = document.getElementById('list');
list.insertAdjacentHTML('afterbegin','<li>HTML</li>');
}
function beforeend(){
var list = document.getElementById('list');
list.insertAdjacentHTML('beforeend','<li>JavaScript</li>');
}
function afterend(){
var list = document.getElementById('list');
list.insertAdjacentHTML('afterend','<h1>Server Side</h1>');
}
</script>'WEB > JavaScript' 카테고리의 다른 글
| Text 객체 (0) | 2016.10.16 |
|---|---|
| Document 객체 (0) | 2016.10.16 |
| Node 객체 : 변경 API (0) | 2016.10.15 |
| Node 객체 : 종류 API (0) | 2016.10.15 |
| Node 객체 : 관계 API (0) | 2016.10.15 |
