[Javascript] 버튼 클릭 시, 노드 복사/붙여넣기

 

이번에는 Javascript를 사용하여

사용자가 버튼 클릭시

특정 노드를 복사하고, 

그 노드를 복사하는 방법을 정리하였습니다.

 

 

cloneNode()

Javascript에서 노드를 복사할 때는 cloneNode() 라는 함수를 사용합니다.

 

node.cloneNode();
node.cloneNode(deep);

 

  파라미터  

• deep : optional. 
  • true/false 값을 넣어준다.
  • 해당 노드의 자식 노드까지 복사하려면 true
  • 해당 노드만 복사하려면 false

  리턴값  

• cloneNode
  • 복사한 새로운 노드를 리턴한다.

 

 

  노드 복사하기 - cloneNode()  

 

<div id='test' class='red-border'>
  <div> 만나서 반가워요 </div>
</div>
<input 
       type='button' 
       value='복사하기' 
       onclick='copyDiv()'
/>

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

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

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

 

위 예제는

'복사하기' 버튼을 클릭할 때마다

'test' div를 복사하고,

복사한 div의 id를 변경하여

'test' div 아래에 붙여넣기 하고 있습니다.

 

그런데, '복사하기' 버튼을 클릭하면

div 안의 글자는 복사, 붙여넣기 되지 않고,

div (빨간 테두리를 가지는 div)만 복사되고 있는 것을 확인할 수 있습니다.

 

const newNode = testDiv.cloneNode();

그것은 cloneNode()에 true 파라미터를 전달하지 않았기 때문에

자식 node들은 복사하지 않고,

자기 자신 node인 'test' 노드만 복사하고 있기 때문입니다.

 

자식 노드까지 복사해서 붙여넣기 하는 방법을

다음 예제에서 소개하겠습니다.

 

 

 

  노드 복사하기 - cloneNode(true)  

 

<div id='test' class='red-border'>
  <div> 만나서 반가워요 </div>
</div>
<input 
       type='button' 
       value='복사하기' 
       onclick='copyDiv()'
/>

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

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

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

 

const newNode = testDiv.cloneNode(true);

이번에는 파라미터로 true를 전달하였습니다.

'test' 노드의 child 노드인 텍스트까지 모두 복사되어 붙여넣기 되는 것을 확인 할 수 있습니다.

 

---

 

Javascript에서 cloneNode() 함수를 사용하여

node를 찾아서 복사하고, 붙여넣기 하는 방법을 알아보았습니다.