웹브라우저 JavaScript

문자열로 노드 제어

노드 변경 API에서는 여러 메소드를 이용해서 노드를 제어하는 방법에 대해서 알아봤다. 그런데 이 방식은 복잡하고 장황하다. 좀 더 편리하게 노드를 조작하는 방법을 알아보자.

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

<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의 코드를 그대로 추가한다.

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

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

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

 

댓글

댓글 본문
작성자
비밀번호
  1. 감사합니다^^
  2. goddin
    오오 insertAdjucentHTML 넘나 신기하네요^^
  3. tachyon
    감사합니다
  4. yihsang
    감사합니다.

    outerHTML을 활용할 때, id값을 설정해주는 건
    target.outerHTML = '<ol id="out"><li>JavaScript Core</li><li>BOM</li><li>DOM</li></ol>';
    큰 따옴표와 작은따옴표를 적절하게 사용하시면 됩니다.
  5. JustStudy
    2016.07.08 금
    고맙습니다 3.
  6. JustStudy
    2016.07.01금
    고맙습니다 2.
  7. scalpel
    문자열을 큰 따옴표로 지정하면 속성값 지정은 작은 따옴표로 해야해서 id='out'로 하시면 되겠네요....
    대화보기
    • 사람구실
      outerHTML을 활용할 때,

      target.outerHTML = "<ol><li>JavaScript Core</li><li>DOM</li><li>BOM</li></ol>";

      여기에서 ol에 id값을 설정해주는 건 안되는 건가요??

      target.outerHTML = "<ol id="out"><li>JavaScript Core</li><li>DOM</li><li>BOM</li></ol>";

      이런식으로 하면 문법적 오류(""에 대한)가 발생하는데 흠... 문자열로 제어할 때 id 값을 부여하는 방법은 없을까요?
    • 이주환
      2016. 04. 27
      잘보고 갑니다~!
    • JustStudy
      고맙습니다
    • WayneKing
      정적인 웹에서 동적인 웹으로 되네요.
      Javascript가 웹에 생명을 불어 넣네요 ㅎㅎ
    • 엔트
      갓브레스우유~
    • 코딩!
      좋네요!
    • will
      자바스크립트 / 제이쿼리
      beforebegin = before
      afterbegin = prepend
      beforeend = append
      afterend = after

      요렇게 매치 되는거 같네요
      맞나요?(괜히 불안..)
    • 찐똥구리구리
      남겨주신 댓글 덕분에 저도 알아보고 갑니다. 감사합니다.
      대화보기
      • 육점이
        항상 감사합니다!!!!
        제가 실습을 ul엘리먼트에 id값 대신 class값으로 target을 주고
        var target = document.getElementsByClassName('target')으로 사용했더니
        계속해서 실행이 안되서 헤매였었는데, 생각해보니 Elements는 HTMLCollection으로 유사배열 형태로 나오기 때문에 값이 하나여도 target[0]으로 실행했어야 했던거였네요!!!
        혼자서 실습해보다 느낀점 적어봅니다~
      • 멋쟁이
        정말 많은 도움을 받고 있습니다
        강의 준비하시느라 고생많으셨습니다
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기