웹브라우저 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. 유유
    감사합니다.
  2. 제이쿼리가 더 간단하지만, 자바스크립트의 원리를 알수 있어서 재미있습니다.
  3. cyh8562
    회원가입시 아이디 중복확인할 떄 쓸수 있겠네요

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

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

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

        설명을 들으면 텍스트 노드 앞에 들어가야 할거 같은데 결과를 보면 텍스트 노드 뒤에 들어가는 것으로 이해됩니다.
      • 호두과자
        감사합니다~~~~
      • gohu517
        좋은 강의 감사합니다. (__)
      • egoing
        그렇게 하셔도 될 것 같습니다.
        준수할 이유는 없습니다~
        대화보기
        • 배우미
          노드 추가 맨 아랫부분 코드에서

          li.appendChild(text);
          target.appendChild(li);

          이것을

          target.appendChild(li);
          li.appendChild(text);

          이렇게 순서를 바꿔도 작동을 하던데...
          위쪽의 순서를 준수해야 할 이유가 있나요 혹시..
        • soogonlee
          1) <ul id="target">
          <li>HTML</li>
          <li>CSS</li>
          </ul>

          2) <ul id="target"><li>HTML</li><li>CSS</li></ul>

          질문1) 2번처럼 코딩하면 <ul id="target">뒤에 #text 노드가 만들어지지 않는건지요?
          질문2) li.appendChild(text);에서 <li><\li>엘리멘트 뒤에 appendChild 메소드를 통해서 'JavasScript'가 뒤에 위치하는건지 아니면 <li>엘리멘트만 생성되어서 appendChild메소드를 통새서 바로 뒤에 'JavaScript'가 붙고 자동적으로 맹핑되는 엘리멘트 <\li>가 생성되어서 <li> JavaScript </li>란 엘리멘트가 완성되는지 알고 싶네요.
        • 규빈이아빠
          좋은 강의 감사합니다^^
        • T-BONE Steak
          여기엔 왜 댓글이 없을까....

          세심한 눈높이 강의 감사합니다.
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기