웹브라우저 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. labis98
    20210911 좋은 강의 감사합니다.
  2. 드림보이
    수강완료했습니다...
  3. 박병진
    2020.12.08 완료 오늘은 여기까지
  4. 박병진
    감사합니다. 2020.12.08
  5. 싸알
    완료
  6. anne
    완료
  7. 정승옥
    완료
  8. 한강
    innerHTML이 이런 뜻리였군요.
    오늘도 감사합니다~~^^!
    200703
  9. 김진욱
    완료
  10. Gritter
    감사합니다~ 새로운 것을 배우기 앞서 이해하기 위해 생활코딩만한 강의가 없는 것 같아요
  11. ㅎㅅㅁ
    200211
  12. 굼벵이
    완료
  13. 모든일이일사천리
    Done : 19/11/24 7PM
  14. JuicyFresh
    감사합니다.
  15. 김수
    20180901 감사해요
  16. 생선과고양이
    20180427 감사합니다
  17. An TaeHyeon
    18-01-28 수강완료
    강의록 공유합니다 :)
    https://goo.gl/GGMcN2
  18. 박인호
    12-29
    수강완료.
    좀 더 직관적인, HTML방식의 수정방법이네요.
  19. Byungsoo Kim
    감사합니다 <<<
  20. crable
    감사합니다
  21. 신입1
    insertAdjacentHTML 좋네용
  22. 코딩왕될래
    위에서 배웠던것보다 훨씬 간단하고 직관적이네요.
  23. 폭스킴
    insertAdjacentHTML() 이름 긴거만 빼면 짱 좋네요~
  24. hyuna
    감사합니다^^
  25. goddin
    오오 insertAdjucentHTML 넘나 신기하네요^^
  26. tachyon
    감사합니다
  27. yihsang
    감사합니다.

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