javascript 자식 노드 추가,삭제,복사

 

 

1. 노드 추가

   노드의 생성 메소드: createElement() 

   노드를 생성하고 기존의 노드에 추가 하는 메소드:  addendChild(), append(), insertBefore()

    - addendChild(), append() => 는 기준 노드의 마지막 자식 요소로 추가.

    - insertBefore() => 는 기준 노드의 앞쪽으로 추가한다. 

html

  <div class="out-box">:out box</div>

 

•  appendChild() 는 노드객체만을 받을 수 있고, 하나의 노드만을 추가할 수 있다.  
• return값을 반환한다.

const $out_box=document.querySelector('.out-box');
const inner_box= document.createElement('div');//추가할 노드 생성

inner_box.setAttribute('class','inner-box');//노드에 클래스를 추가할 경우
inner_box.innerHTML+='<span class="text">inner-box</span>';//노드 내부에 추가 생성 할 경우


$out_box.appendChild(inner_box);//부모 노드의 제일 뒤로 추가


//결과
//<div class="out-box">
	":out box"
      <div class="inner-box">
          <span class="text">inner-box</span>
      </div>
  </div>
  
  
  -----
  //리턴값 반환
  
  //let newEl = $out_box.appendChild(inner_box);
  
  //console.log(newEl);
  
  //=>결과-리턴값
  
 //	<div class="inner-box">
 //      <span class="text">inner-box</span>
 //  </div>

 

• append() 는 노드객체와 string(text)를 사용할 수 있고, 여러개의 요소를 추가할 수 있다.  
• return값을 반환하지 않는다.

const $out_box=document.querySelector('.out-box');
const inner_box= document.createElement('div');
const inner_box2= document.createElement('div');

inner_box.setAttribute('class','inner-box');
inner_box2.setAttribute('class','inner-box2');

inner_box.innerHTML+='<span class="text">inner-box</span>';

$out_box.append(inner_box,'안쪽 박스',inner_box2);
        
//결과
//<div class="out-box">
	":out box"
      <div class="inner-box">
          <span class="text">inner-box</span>
      </div>
      "안쪽 박스"
      <div class="inner-box2"></div>
  </div>
  
 //리턴값 반환
  
 //let newEl = $out_box.append(inner_box);
  
 //console.log(newEl);
  
 //=>결과-리턴값
  
 //undefined

 

• insertBefore()

        insertBefore(추가노드,기준노드)형식으로 사용한다. 기준노드가 생략되면 appendChild()처럼 제일 마지막에 추가 된다.

const $out_box=document.querySelector('.out-box');
const inner_box= document.createElement('div');
const inner_box2= document.createElement('div');

inner_box.setAttribute('class','inner-box');
inner_box2.setAttribute('class','inner-box2');

inner_box.innerHTML+='<span class="text">inner-box</span>';

$out_box.appendChild(inner_box);
$out_box.insertBefore(inner_box2, $out_box.firstChild);//$out_box의 첫번째 요소의 앞에 추가


//결과
//<div class="out-box">
	<div class="inner-box2"></div>
	":out box"
      <div class="inner-box">
          <span class="text">inner-box</span>
      </div>
  </div>

 

2.  노드 삭제

   메소드 remove(), removechild()

   - remove() : 해당 노드를 메모리에서 삭제하고 종료.리턴값 없음

   - removechild() :

           부모-자식 관계를 DOM트리에서 해제, 메모리에 노드 존재, 해제한 노드 참조 리턴.부모 노드에서만 삭제 가능 => 부모요소.removechild();

• remove()

const $out_box=document.querySelector('.out-box');
const $inner_box=document.querySelector('.inner-box');

let newEl=$inner_box.remove();

console.log($out_box);
console.log(newEl);


// 결과값
// <div class="out-box">:out box</div>
// undefined



----

//부모노드에서 remove()로 자식 노드 삭제할 경우
$out_box.remove($inner_box);
    
console.log($out_box);

// 결과값
//   <div class="out-box">
//       :out box
//        <div class="inner-box">
//            :inner-box:
//        </div>
//    </div> => 삭제 안됨

 

• removechild()                   

const $out_box=document.querySelector('.out-box');
const $inner_box=document.querySelector('.inner-box');

let newEl= $out_box.removeChild($inner_box);

console.log($out_box);
console.log(newEl);


$inner_box.removechild(); //부요 요소가 아닌 삭제요소에서 스스로 삭제

// 결과값
// <div class="out-box">:out box</div>
// <div class="inner-box"> :inner-box: </div> ==>리턴값

//index.html:27 Uncaught TypeError: Failed to execute 'removeChild' on 'Node': 1 argument required, but only 0 present. =>오류

 

• 전체 자식 노드 삭제

    <div class="out-box">
        :out box
        <div class="inner-box">
            :inner-box:
            <div class="inner-box2">
                :inner-box2:
            </div>
        </div>
        <div class="inner-box3">
            :inner-box3:    
        </div>
    </div>

const $out_box=document.querySelector('.out-box');
        
while($out_box.hasChildNodes()){ //자식 요소가 있는지 확인-false가 될때까지 반복
     $out_box.removeChild($out_box.firstChild); // 첫번째 자식 요소를 삭제
}

console.log($out_box);


// 결과값
//<div class="out-box></div>

 

3.  노드 복사

   메소드 cloneNode()

   - cloneNode(true) : true를 넣어주면 자식 노드까지 복사됨

• cloneNode(true) 

//html은 노드 삭제 예시와 같음

 const $out_box=document.querySelector('.out-box');


let firstClone= $out_box.firstElementChild.cloneNode(true);
let firstClone2= $out_box.firstElementChild.cloneNode(); //true 없음
let lastClone= $out_box.lastElementChild.cloneNode(true);

console.log(firstClone);
console.log(firstClone2);
console.log(lastClone);

//결과 
//firstClone출력 =>	<div class="inner-box">
//          				":inner-box:"
//           			 <div class="inner-box2"> :inner-box2:</div>
//      			 </div>
//firstClone2출력 =>	<div class="inner-box"></div>
//lastClone출력 =>	<div class="inner-box3"> :inner-box3: </div>