노드 변경 API에서는 여러 메소드를 이용해서 노드를 제어하는 방법에 대해서 알아봤다. 그런데 이 방식은 복잡하고 장황하다. 좀 더 편리하게 노드를 조작하는 방법을 알아보자.
innerHTML
innerHTML는 문자열로 자식 노드를 만들 수 있는 기능을 제공한다. 또한 자식 노드의 값을 읽어올 수도 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <ul id="target"> <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 target = document.getElementById('target'); alert(target.innerHTML); } function set(){ var target = document.getElementById('target'); target.innerHTML = "<li>JavaScript Core</li><li>BOM</li><li>DOM</li>"; }</script> |
outerHTML
outerHTML은 선택한 엘리먼트를 포함해서 처리된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <ul id="target"> <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 target = document.getElementById('target'); alert(target.outerHTML); } function set(){ var target = document.getElementById('target'); target.outerHTML = "<ol><li>JavaScript Core</li><li>BOM</li><li>DOM</li></ol>"; }</script> |
innerText, outerText
innerHtml, outerHTML과 다르게 이 API들은 값을 읽을 때는 HTML 코드를 제외한 문자열을 리턴하고, 값을 변경할 때는 HTML의 코드를 그대로 추가한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <ul id="target"> <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 target = document.getElementById('target'); alert(target.innerText); } function set(){ var target = document.getElementById('target'); target.innerText = "<li>JavaScript Core</li><li>BOM</li><li>DOM</li>"; }</script> |
insertAdjacentHTML()
좀 더 정교하게 문자열을 이용해서 노드를 변경하고 싶을 때 사용한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <ul id="target"> <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 target = document.getElementById('target'); target.insertAdjacentHTML('beforebegin','<h1>Client Side</h1>'); } function afterbegin(){ var target = document.getElementById('target'); target.insertAdjacentHTML('afterbegin','<li>HTML</li>'); } function beforeend(){ var target = document.getElementById('target'); target.insertAdjacentHTML('beforeend','<li>JavaScript</li>'); } function afterend(){ var target = document.getElementById('target'); target.insertAdjacentHTML('afterend','<h1>Server Side</h1>'); }</script> |
