웹브라우저 JavaScript

노드 변경 API

노드를 추가, 제거, 변경하는 방법을 알아보자.

노드 추가

노드의 추가와 관련된 API들은 아래와 같다.

노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 하는데 이것은 document 객체의 기능이다. 아래 API는 노드를 생성하는 API이다.

<ul id="target">
    <li>HTML</li>
	<li>CSS</li>
</ul>
<input type="button" onclick="callAppendChild();" value="appendChild()" />
<input type="button" onclick="callInsertBefore();" value="insertBefore()" />
<script>
	function callAppendChild(){
		var target = document.getElementById('target');
		var li = document.createElement('li');
		var text = document.createTextNode('JavaScript');
		li.appendChild(text);
		target.appendChild(li);
	}

	function callInsertBefore(){
		var target = document.getElementById('target');
		var li = document.createElement('li');
		var text = document.createTextNode('jQuery');
		li.appendChild(text);
		target.insertBefore(li, target.firstChild);
	}
</script>

노드 제거

노드 제거를 위해서는 아래 API를 사용한다. 이 때 메소드는 삭제 대상의 부모 노드 객체의 것을 실행해야 한다는 점에 유의하자.

<ul>
    <li>HTML</li>
	<li>CSS</li>
	<li id="target">JavaScript</li>
</ul>
<input type="button" onclick="callRemoveChild();" value="removeChild()" />
<script>
	function callRemoveChild(){
		var target = document.getElementById('target');
		target.parentNode.removeChild(target);
	}
</script>

노드 바꾸기

노드 바꾸기에는 아래 API가 사용된다.

<ul>
    <li>HTML</li>
	<li>CSS</li>
	<li id="target">JavaScript</li>
</ul>
<input type="button" onclick="callReplaceChild();" value="replaceChild()" />
<script>
	function callReplaceChild(){
		var a = document.createElement('a');
		a.setAttribute('href', 'http://opentutorials.org/module/904/6701');
		a.appendChild(document.createTextNode('Web browser JavaScript'));

		var target = document.getElementById('target');
		target.replaceChild(a,target.firstChild);
	}
</script>

 

댓글

댓글 본문
  1. 코리니
    20230103
  2. 헤밍웨이
    220825 감사합니다!
  3. 임앤강
    2022-02-12 강의 감사합니다~
  4. 드림보이
    2021.12.28. 노드 변경 API 파트 수강완료
  5. pmxsg
    2021.12.22. 수강
  6. labis98
    20210911 좋은 강의 감사합니다.
  7. 감사합니다.
  8. 박병진
    2020.12.08 완료
  9. 싸알
    완룡
  10. anne
    완료
  11. 정승옥
    완료
  12. 김진욱
    완료
  13. Gritter
    감사합니다
  14. guest
    this turn
  15. 굼벵이
    완료
  16. 모든일이일사천리
    Done : 19/11/24 3PM
  17. 2019-10-16 1:38pm 완료
  18. johnAhn
    target의 firstchild는 공백이 없이 문자로 구성되어있기에 교체 가능합니다.
    " <li id="target">JavaScript</li> "
  19. 이고잉님후계자
    질문있습니다. JavaScript - Node의 변경 API (2/2) : 노드 삭제, 교체강의 5분쯤에서 target의 firstChild를 a로 바꿔주는거같은데 firstChild는 JavaScript가 아닌 공백문자아닌가요ㅛㅇ????증말 어렵습니다...
  20. JuicyFresh
    감사합니다. 슬슬 실전 내용이 다가 오는 듯 합니다.
  21. 생선과고양이
    20180426 감사합니다
  22. 박인호
    12-29
    수강완료.
    노드를 변경하고 하는 과정에서
    Attribute방식으로 속성을 변경하는 방법에 대해서도 복습이 됐네요.
  23. Byungsoo Kim
    감사합니다.
  24. 수복
    감사합니다.
  25. 아이노바
    항상 감사~
  26. 칼잡이최제잘
    감사합니다. ~~도움이 되었습니다.
    대화보기
    • illliilllliillliii
      감사합니다 !
    • wooil
      잘봣습니다.
      이제 정말 많은 것을 제어 할 수 있을 것 같아요
    • crable
      감사합니다.
    • 신입1
      감사합니다.
    • Ku0re
      #text의 앞에 오나 뒤에 오나 결과는 같습니다.
      개행은 있으나 없으나 가독성을 위해 해주는 것이기 때문에 효과는 같습니다.
      (물론 파이썬같은 언어에서는 들여쓰기 내어쓰기가 중요합니다만)
      실제로 사용할때는 minify를 일부러 해주기도 하니까요.
      아 여기서 minify는 실제 돌아가는데는 필요없는 개행문자나 주석 등을 없애므로써
      소스의 크기와 용량을 줄여주는 것을 말합니다.
      이 외에 실습 방법으로는 w3school의 예제가 괜찮아보이더라구요
      target.insertBefore(li, target.childNodes[0]); 와 같이 사용해보시면 원하는 위치에 추가할 수 있습니다.
      또는 원래 있는 엘리먼트끼리 insertBefore에 주게되면 위치변경도 가능하구요.
      이 글 달린지 오래됐는데 답변을 아무도 달지 않았기에 늦게라도 누군가 참고하시라고 답글답니다.
      모두 열공합시다
      대화보기
      • rawoon
        > var ul = $('#target');
        < undefined
        > ul.childNodes
        < NodeList [#text "
        ", <li>, #text "
        ", <li>, #text "
        "] (5)
        > ul.childNodes //insertBefore() 실행
        < NodeList [<li>, #text "
        ", <li>, #text "
        ", <li>, #text "
        "] (6)
        > ul.childNodes //insertBefore() 실행
        <NodeList [<li>, <li>, #text "
        ", <li>, #text "
        ", <li>, #text "
        "] (7) = $1


        콘솔에서 써봤는데 #text 앞에 붙게 되어있네요.
        그러면 줄바꿈 없이 들어가야 될 것 같은데 페이지 상에서는 일반적인 li 처럼 들어가지는 줄바꿈이 없어도 되는 건가요?
      • 유유
        감사합니다.
      • hyuna
        제이쿼리가 더 간단하지만, 자바스크립트의 원리를 알수 있어서 재미있습니다.
      • cyh8562
        회원가입시 아이디 중복확인할 떄 쓸수 있겠네요

        감사합니다
      • tachyon
        감사합니다
      • yihsang
        감사합니다.
      • 항상 너무너무 감사드립니다
      • JustStudy
        2016.07.08 금
        고맙습니다 3.
      • JustStudy
        2016.07.30금
        고맙습니다 2.
      • 이주환
        2016. 04. 27
        잘보고 갑니다~!
      • JustStudy
        고맙습니다
      • 유진
        ㅋㅋㅋ 무섭네요
      • Peater Han
        잘 봤습니다. 근데, 만약에 하위노드가 딸려있는 노드를 바꾸면 하위노드도 삭제가 되나요? 하고 묻고 싶지만, 직접 해봐야 겠네요ㅎㅎ
      • Beluga
        그냥 내용을 바꿔버리려면 html 코드를 바꾸면 그만이겠지만
        특정 조건이 맞을 때만 내용을 추가하거나 변경하거나 또는 삭제하려 한다면
        즉, 프로그램이 내용을 컨트롤 해야 할 경우엔
        이렇게 동적으로 바꿔줘야 하는 것이겠죠.
        대화보기
        • 2015-11-12
          오늘 2배속 감상은 여기서 끝.
        • 즐라탄
          코드가 있어야할때가 있고 없어야 할때가 있어야하기때문아닌가요?? 저두 자세히는 모르겟습니다.
          대화보기
          • Great
            노드를 제거하는거 코딩을 그냥 지우면 안되나요?

            그냥 궁금해서..
          • 코딩!
            왠지 게시판 글을 올릴 때 맨 목록 맨 위에다가 보이려고 할 때 쓸 수도 있는 기능일것 같기도 한데 맞나요 ? ㅎㅎ
          • 첫 번째 영상
            function callInsertBefore() 에서
            target.insertBefore(li, target.firstChild);

            target 의 firstChild 가 텍스트 노드인데 그 앞에 li 를 추가하면 텍스트노드 앞에 들어가는 건가요?뒤에 들어가는 건가요?

            설명을 들으면 텍스트 노드 앞에 들어가야 할거 같은데 결과를 보면 텍스트 노드 뒤에 들어가는 것으로 이해됩니다.
          버전 관리
          egoing@gmail.com
          현재 버전
          선택 버전
          graphittie 자세히 보기