[javascript]-innerHTML/outerHTML/insertAdjacentHTML

자바스크립트 시리즈는 '생활코딩-클라이언트 과목의 '웹브라우저 자바스크립트' 강의'를 참고로
공부하고 기록하기 위한 용도입니다. 

* innerHTML

: 특정 element의 내부 HTML 내용을 가져오거나, 특정 요소의 HTML 내용을 변경합니다. 

 

< innerHTML 을 이용해서, html 태그 내부 변경 >

 <ul id='target'>
     <li>HTML</li>
     <li>CSS</li>
 </ul>
 
 <input type="button" onclick="set();" value="set" />

<script>
    function set(){
      var target = document.getElementById('target');
      target.innerHTML="<li>javascript</li><li>jsp</li><li>python</li>";
    }
 </script>

기본 화면

-> <ul>의 id를 통해 <ul>의 안의 html 코드를 변경해줘서, set 버튼 클릭시, html 코드가 변경됩니다. 

set 버튼 클릭 후

---

< innerHTML 을 이용해서, 연결 되는 링크 변경 >

<a id="mine" href="www.naver.com"> Naver </a>
<br>
<input type="button" onclick="change();" value="change Link" />

기본 화면 

<script>
 function change(){
   var ch = document.getElementById('mine');
   ch.innerHTML="seo-0-dev";
   ch.href.innerHTML="https://seo-0-dev.tistory.com/";
}
</script>

-> change Link 버튼을 누르면, 나타나는 링크가 바뀌게 됩니다. 

---

* outerHTML 

< outerHTML 을 이용해서, HTML 태그 변경 >

   <ul id='target'>
     <li>HTML</li>
     <li>CSS</li>
   </ul>
    <input type="button" onclick="set()" value="set">

기본 화면

 function set(){
   var target = document.getElementById('target');
   target.outerHTML="<ol><li>javascript</li><li>jsp</li><li>python</li></ol>"
    }

-> outerHTML 은 innerHTML 과 달리, get한 element부터 HTML 을 변경되어, ul도 ol로 변경되었음을 알 수 있습니다. 

---

* insertAdjacentHTML

- 해당 메소드를 사용하면, 타겟 요소의 시작 앞, 뒤, 종료 앞, 뒤에 노드를 삽입하는 것이 가능합니다. 

- insertAdjacentHTML의 'beforebegin', 'afterbegin', 'beforeend','afterend' 옵션은 노드가 DOM 트리 내에 존재하고,

부모요소를 가진 경우에만 동작하게 됩니다. 

   <ul id='target'>
     <li>HTML</li>
     <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>javascript</li>');
  }
  function beforeend(){
    var target = document.getElementById('target');
    target.insertAdjacentHTML('beforeend','<li>jsp</li>');
  }
  function afterend(){
    var target = document.getElementById('target');
    target.insertAdjacentHTML('afterend','<h1>Server Side</h1>');
  }
  </script>