HTML DOM cloneNode() 메서드

<시간/>

HTML DOM cloneNode() 메서드는 cloneNode() 메서드가 호출되고 복제를 반환하는 지정된 노드의 복사본을 만드는 데 사용됩니다. cloneNode() 메소드는 주어진 노드의 모든 속성과 값을 복제합니다.

구문

다음은 cloneNode() 메서드의 구문입니다. -

yourNode.cloneNode([deep])

여기서 deep은 선택적 매개변수입니다. 값을 true로 설정하면 주어진 노드와 그 자식이 속성 및 값과 함께 복제되어야 함을 지정하고 값을 false로 설정하여 지정된 노드와 해당 속성 및 값만 복사하고 자식 노드는 복사하지 않도록 지정합니다. .

예시

HTML DOM cloneNode() 메서드의 예를 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<head>
<title>CLONE NODE</title>
<style>
h1{color:green;}
h2{ color:blue; }
</style>
</head>
<body>
<div id="DIV1">
<h1> HEADING 1</h1>
<h2> HEADING 2</h2>
</div>
<button onclick="CloneEle()"> CLONE </button>
<script>
   function CloneEle() {
      var x= document.getElementById("DIV1");
      var clone = x.cloneNode(true);
      document.body.appendChild(clone);
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM cloneNode() 메서드

CLONE 버튼 클릭 시 -

HTML DOM cloneNode() 메서드

위의 예에서 -

div를 만들고 그 안에

h1{color:green;}
h2{ color:blue; }
<div id="DIV1">
<h1> HEADING 1</h1>
<h2> HEADING 2</h2>
</div>

그런 다음 사용자가 클릭할 때 CloneEle() 기능을 실행하는 버튼 CLONE을 만들었습니다.

<button onclick="CloneEle()"> CLONE </button>

CloneEle() 메서드는 getElementById() 메서드를 사용하여 div 요소를 가져와 변수 x에 할당합니다. 그런 다음 true 매개변수와 함께

에서 cloneNode(ture) 메서드를 사용하여 그것과 그 자식 요소를 복제하고 변수 clone에 할당합니다. 그런 다음 appendChild() 메서드를 사용하여 복제 변수를 문서 본문에 추가합니다. -

function CloneEle() {
   var x= document.getElementById("DIV1");
   var clone = x.cloneNode(true);
   document.body.appendChild(clone);
}