[ JavaScript ] JS 문자열로 노드 제어 (innerHTML,outerHTML, innerText, outerText,insertAdjacentHTML())

이미지 출처 :    https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 

---

 

 

 

- 문자열로 노드 제어

 

- innerHTML

 

 

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');
        console.log(target.innerHTML);
    }
    function set(){
        var target = document.getElementById('target');
        target.innerHTML = "<li>JavaScript Core</li><li>BOM</li><li>DOM</li>";
    }
</script>

 

 

 

 

get 버튼을 누르면 콘솔창에 위와 같은 결과가 출력됩니다.

 

innerHTML 로 타겟의 하위 html 태그를 얻어옵니다.

 

 

 

 

 

set 버튼을 누르면 html 문서가 변해서 출력됩니다.

 

 

 

 

- outerHTML

 

 

outerHTML은 선택한 엘리먼트를 포함해서 처리됩니다.

 

innerHTML 은 선택한 엘리먼트 하위의 엘리먼트들을 다뤘지만,

 

outerHTML 선택한 엘리먼트를 포함한다는 점에서 차이가 있습니다.

 

 

- outerHTML 예제

<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');
        console.log(target.outerHTML);
    }
    function set(){
        var target = document.getElementById('target');
        target.outerHTML = "<ol><li>JavaScript Core</li><li>BOM</li><li>DOM</li></ol>";
    }
</script>

 

 

 

get 버튼을 눌렀을 때의 결과는 아래와 같습니다.

타겟을 포함해서 출력하는 것을 알 수 있습니다.

 

 

 

 

 

 

 

 

 

set 버튼을 누르면 위의 사진과 같이 됩니다.

 

- innerText, outerText

 

 

innerHtml, outerHTML과 다르게 이 API들은 값을 읽을 때는

HTML 코드를 제외한 문자열을 리턴하고, 값을 변경할 때는 HTML의 코드를 그대로 추가합니다.

 

 

 

- innerText, outerText 예제

<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');
        console.log(target.innerText);
    }
    function set(){
        var target = document.getElementById('target');
        target.innerText = "<li>JavaScript Core</li><li>BOM</li><li>DOM</li>";
    }
</script>

 

 

 

 

 

get 버튼을 누르면 콘솔창에 텍스트만 나옵니다.

 

 

 

 

 

 

set 버튼을 누르면 위와 같이 문서가 변합니다.

 

 

 

 

 

 

- insertAdjacentHTML()

 

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

 

 

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

 

하나하나 실행시켜 가보겠습니다.

 

 

 

- beforebegin 

먼저 beforebegin 함수를 실행한 결과입니다.

 

target 이 시작되기 전에 h1 태그가 추가되는 것을 알 수 있습니다.

 

 

 

 

 

- afterbegin

target 이 시작한 후에 바로 태그가 추가되는 것을 확인할 수 있습니다.

 

 

 

 

- beforeend 

 

 

target 이 끝나기 전에 태그가 추가됩니다.

 

 

 

- afterend 

 

 

 

target이 끝나고 난 후에 h1 태그가 추가되는 것을 알 수 있습니다.

 

 

 

 

 

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.