웹브라우저 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. Byungsoo Kim
    감사합니다 <<<
  2. 신시내티
    1) innerHTML
    outerHTML
    : 값을 읽을때는 HTML 코드를 포함한!! 문자열을 리턴, 값 변경시 HTML의 코드빼고!! 추가.

    2) innerText
    outerText
    : 값을 읽을 때는 HTML 코드를 제외한!! 문자열을 리턴하고, 값을 변경시 코드를 그대로!!! 추가.

    *inner는 자기자신을 제외한 자기 하위의 엘리먼트들을 제어할때,
    outer는 자기자신을 포함한 하위 엘리먼트들을 제어할때 사용.


    =====================================================================
    insertAdjacentHTML 는 추가할 코드 위치를 조정할수 있다.
    변경할 코드의 부모객체.insertAdjacentHTML('beforebegin','넣을 내용');
    ->1번째의 앞에 넣음
    변경할 코드의 부모객체.insertAdjacentHTML(afterbegin','넣을 내용');
    ->1번째의 뒤에 넣음
    변경할 코드의 부모객체.insertAdjacentHTML('beforeend','넣을 내용');
    ->막내 앞에
    변경할 코드의 부모객체.insertAdjacentHTML('afterend','넣을 내용');
    ->막내 뒤에
  3. crable
    감사합니다
  4. 신입1
    insertAdjacentHTML 좋네용
  5. 코딩왕될래
    위에서 배웠던것보다 훨씬 간단하고 직관적이네요.
  6. 폭스킴
    insertAdjacentHTML() 이름 긴거만 빼면 짱 좋네요~
  7. hyuna
    감사합니다^^
  8. goddin
    오오 insertAdjucentHTML 넘나 신기하네요^^
  9. tachyon
    감사합니다
  10. yihsang
    감사합니다.

    outerHTML을 활용할 때, id값을 설정해주는 건
    target.outerHTML = '<ol id="out"><li>JavaScript Core</li><li>BOM</li><li>DOM</li></ol>';
    큰 따옴표와 작은따옴표를 적절하게 사용하시면 됩니다.
  11. JustStudy
    2016.07.08 금
    고맙습니다 3.
  12. JustStudy
    2016.07.01금
    고맙습니다 2.
  13. 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 자세히 보기