[Javascript] 요소(element) 복사하여 붙여넣기 (cloneNode())

 

 

javascript에서 dom의 요소(element)를 복사하여 붙여넣기 하는 방법입니다.

 

 

cloneNode()

dom의 노드(node)를 복사하는 함수입니다.

var dupNode = node.cloneNode(deep);

 

이 함수는 node를 복사하여, 복사본을 리턴(dupNode)합니다.

  파라미터  

• deep (optional)
  • true/false
  • 요소의 하위 요소까지 모두 복사하려면 true
  • 요소의 하위 요소를 제외하고 복사하려면 false
  • default : false 또는 true
    (최신 브라우저에서는 default 값이 false 이지만, 구형 브라우저에서는 default 값이 true입니다.
    따라서, 이 값은 optional 이지만, 가능하면 파라미터 값을 명확하게 작성해 주는 것이 좋습니다.

  리턴값  

• dupNode
  
  • 복사한 node를 리턴합니다.

 

  예제  

<div id='test' class='red-border'>
  만나서 반가워요
</div>
<input 
       type='button' 
       value='deep copy' 
       onclick='deepCopy()'
/>
<input 
       type='button' 
       value='shallow copy' 
       onclick='shallowCopy()'
/>

.red-border {
  border : 1px solid red;
  height : 1em;
}

let idNum = 0;

function deepCopy()  {
  // 'test' node 선택
  const testDiv = document.getElementById('test');
  
  // 노드 복사하기 (deep copy)
  const newNode = testDiv.cloneNode(true);
  
  // 복사된 Node id 변경하기
  idNum++;
  newNode.id = 'copyNode' + idNum;

  // 복사한 노드 붙여넣기
  testDiv.after(newNode);
}

function shallowCopy()  {
  // 'test' node 선택
  const testDiv = document.getElementById('test');
  
  // 노드 복사하기 (shallow copy)
  const newNode = testDiv.cloneNode(false);
  
  // 복사된 Node id 변경하기\
  idNum++;
  newNode.id = 'copyNode' + idNum;

  // 복사한 노드 붙여넣기
  testDiv.after(newNode);
}

<div> 요소를 복사하여, 그 아래에 붙여넣기 하는 예제입니다.

'deep copy', 'shallow copy' 2개의 버튼이 있는데

'deep copy' 버튼을 클릭하면, div 하위의 노드인 텍스트 노드까지 모두 복사되고

'shallow copy' 버튼을 클릭하면, 하위 노드인 텍스트 노드는 제외하고 <div> 노드만 복사됩니다.

deep copy와 shallow copy를 구분하는 것은,

cloneNode() 함수의 파라미터(true/false)입니다.

 

const testDiv = document.getElementById('test');

복사할 대상 요소(element)를 가져옵니다.

여기서는 'test'라는 id를 가진 div 요소를 가져왔습니다.

 

const newNode = testDiv.cloneNode(true);

const newNode = testDiv.cloneNode(false);

cloneNode()  함수를 이용하여 newNode 변수에 test 노드를 복사합니다.

이때, 파라미터 값을 true/false로 다르게 주어

deep copy와 shallow copy를 구분하였습니다.

 

newNode.id = 'copyNode' + idNum;

cloneNode() 함수를 사용하여 노드를 복사하면

노드의 id를 포함한 인라인 속성들이 모두 복사됩니다. 

(addEventListener()로 추가된 속성과

node.onclick=fn 등과 같이 element의 속성으로 지정된 값,

<canvas>로 그려진 이미지는 복사에서 제외됩니다.)

따라서, id도 그대로 복사되기 때문에 

복사된 노드를 그대로 붙여넣기 하면

한 문서에 중복되는 id가 발생하게 됩니다.

따라서, element에 id가 있는 경우

이를 붙여넣기 하기 전에 element의 id를 변경해 주는 것이 좋습니다.

따라서, 위 코드는 붙여 넣기 할 element의 id를 변경해주는 코드입니다.

 

testDiv.after(newNode);

복사된 element를 testDiv의 바로 아래에 붙여 넣습니다.

 

---

 

cloneNode()  함수를 이용하여

요소(element)를 복사/붙여넣기 하는 방법을 알아보았습니다.