Node 객체 - 문자열로 노드 제어

innerHTML

innerHTML는 문자열로 자식 노드를 만들 수 있는 기능을 제공한다. 또한 자식 노드의 값을 읽어올 수도 있다. 

<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은 선택한 엘리먼트를 포함해서 처리된다. 

innerText, outerText

innerHtml, outerHTML과 다르게 이 API들은 값을 읽을 때는 HTML 코드를 제외한 문자열을 리턴하고, 값을 변경할 때는 HTML의 코드를 그대로 추가한다. 

insertAdjacentHTML()

좀 더 정교하게 문자열을 이용해서 노드를 변경하고 싶을 때 사용한다. 

• target.insertAdjacentHTML('beforebegin', '<h1>...</h1>');
  <code>beforebegin</code>은 target 노드의 앞에 두번째 인자인 H1 노드 객체를 삽입한다.

• target.insertAdjacentHTML('afterbegin', '<li>...</li>');
  <code>afterbegin</code>은 target 노드의 자식 객체 맨 앞에 두번째 인자인 LI 노드 객체를 삽입한다.

• target.insertAdjacentHTML('afterbegin', '<li>...</li>');
  <code>beforeend</code>는 target 노드의 자식 객체 맨 뒤에 두번째 인자인 LI 노드 객체를 삽입한다.

• target.insertAdjacentHTML('afterend', '<h1>...</h1>');
  <code>afterend</code>는 target 노드의 뒤에 두번째 인자인 H1 노드 객체를 삽입한다.

<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>

실행결과:

Client Side
HTML
CSS
JavaScript
Server Side