Javascript - 요소(element) 복사, 붙여넣기

Javascripthtml

어떤 요소(element)를 복사하여 특정 요소 아래에 붙여넣는 방법에 대해서 알아보겠습니다.

어떤 요소 복사하여 다른 요소에 붙여넣기

HTML

아래와 같이 2개의 div와 1개의 버튼이 있습니다. 버튼을 클릭하면 요소를 복사하고 붙여넣으려고 합니다.

  • original-element는 복사할 요소
  • target-element는 복사한 요소를 붙여넣을 부모 요소
<div id="original-element">
  <p>This is the original element.</p>
</div>
<div id="target-element">
  <p>This is the target element.</p>
</div>

<button id="copy-button">Copy Element</button>

Javascript

Javascript에서는 3개의 요소를 찾고, 버튼에 이벤트 리스너를 설정하여 버튼이 클릭될 때 요소를 복사하여 붙여넣도록 합니다.

  • cloneNode(deep) 함수는 deep 인자가 true일 때 깊은 복사(모든 하위 요소 복사), false 일 때 얕은 복사(노드만 복사)
  • target.appendChild(source)는 target 요소에 source 요소를 하위에 추가
const copyButton = document.getElementById('copy-button');
const originalElement = document.getElementById('original-element');
const targetElement = document.getElementById('target-element');

copyButton.addEventListener('click', function() {
  const clonedElement = originalElement.cloneNode(true);
  targetElement.appendChild(clonedElement);
});

버튼을 여러번 클릭하면, 아래와 같이 복사 및 붙여넣기가 되고, HTML을 보면 target-element 요소 하위에 복사된 요소들이 추가됩니다.

<div id="original-element">
  <p>--This is the original element--</p>
</div>
<div id="target-element">
  <p>++This is the target element++</p>
  <div id="original-element">
    <p>--This is the original element--</p>
  </div>
  <div id="original-element">
    <p>--This is the original element--</p>
  </div>
  <div id="original-element">
    <p>--This is the original element--</p>
  </div>
  <div id="original-element">
    <p>--This is the original element--</p>
  </div>
</div>

Output:

특정 요소 다음에 붙여 넣기

위의 예제에서는 요소를 붙여넣을 때 appendChild()로 특정 요소의 자식 요소로 추가하였는데요.

아래와 같이 after()를 사용하면 특정 요소의 다음 요소(같은 부모의 형제 요소)로 추가됩니다.

const copyButton = document.getElementById('copy-button');
const originalElement = document.getElementById('original-element');
const targetElement = document.getElementById('target-element');

copyButton.addEventListener('click', function() {
  const clonedElement = originalElement.cloneNode(true);
  targetElement.after(clonedElement);
});

버튼은 클릭하여 복사 및 붙여넣기를 하면, HTML은 아래와 같이 보입니다.

  • target-element의 자식 요소가 아닌, 형제 요소로 추가됨
<div id="original-element">
  <p>--This is the original element--</p>
</div>
<div id="target-element">
  <p>++This is the target element++</p>
</div>
<div id="original-element">
  <p>--This is the original element--</p>
</div>
<div id="original-element">
  <p>--This is the original element--</p>
</div>
<div id="original-element">
  <p>--This is the original element--</p>
</div>
<div id="original-element">
  <p>--This is the original element--</p>
</div>

<button id="copy-button">Copy Element</button>
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha