노드의 변경

노드를 추가, 제거, 변경하는 방법

노드 추가

  • appendChild(child) : 노드의 마지막 자식으로 주어진 엘리먼트를 추가

  • insertBefore(newElement, referenceElement) : 두번째 인자로 전달한 엘리먼트 앞에 새로운 엘리먼트 추가

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

    • document.createElement(tagname) : 엘리먼트 노드 생성

    • document.createTextNode(data) : 텍스트 노드 생성

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
   <ul id="target">
     <li>HTML</li>
     <li>CSS</li>
   </ul>
  <input type="button" onclick="fn_appendChild();" value="appendChild()">
  <input type="button" onclick="fn_insertBefore();" value="insertBefore()">
  
  <script>
    function fn_appendChild() {
      var target = document.getElementById('target');
      
      // li 엘리먼트 노드 생성
      var li = document.createElement('li');
      // 텍스트 노드 생성
      var text = document.createTextNode('JavaScript');
      // li노드의 텍스트노드 삽입
      li.appendChild(text);
      
      // ul에 하위 자식으로 마지막에 새로 만든 li노드 추가
      target.appendChild(li);
    }
    function fn_insertBefore() {
      var target = document.getElementById('target');
      
      var li = document.createElement('li');
      var text = document.createTextNode('JavaScript');
      li.appendChild(text);
      
      // ul에 하위 자식으로 첫번째 자식의 앞에 새로 만든 li노드 추가
      target.insertBefore(li, target.firstChild);
    }
  </script>
</body>
</html>

노드 제거

  • removeChild(child) : 메소드는 삭제 대상의 부모 노드의 객체의 것을 실행해야 함

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <h2>리스트 클릭시 삭제</h2>
  <ul>
    <li onclick="fn_removeNode(this)">HTML</li>
    <li onclick="fn_removeNode(this)">CSS</li>
    <li onclick="fn_removeNode(this)">JAVASCRIPT</li>
  </ul>
  
  <script>
    function fn_removeNode(self) {
      // 삭제할 노드의 부모 노드에서 실행해야함    
      self.parentNode.removeChild(self);
    }
  </script>
</body>
</html>

노드 변경

  • replacChild(newChild, oldChild) : 자식 노드를 변경하는 메소드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li id="target">Javascript</li>
  </ul>
  <input type="button" value="changeA" onclick="fn_changeNode()">
  
  <script>
    function fn_changeNode() {
      var target = document.getElementById('target');
      
      var li = document.createElement('li');
      var a = document.createElement('a');
      a.setAttribute('href', 'https://www.naver.com/');
      var text = document.createTextNode('change!!');
      
      a.appendChild(text);
      li.appendChild(a);
      
      target.parentNode.replaceChild(li, target);
    }
  </script>
</body>
</html>

PreviousNode 종류 APINextjQuery 노드 변경 API

Last updated

Was this helpful?