노드 복제

노드를 복제하는 메소드도 당연히 있다.

elem.cloneNode(true)을 호출하면 elem의 ‘깊은’ 복제본이 만들어져 속성 전부와 자손 요소 전부가 복제된다.

elem.cloneNode(false)을 호출하면 후손 노드 복사 없이 elem만 복제된다.

<style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<div class="alert" id="div">
  <strong>안녕하세요!</strong> 중요 메시지를 확인하셨습니다.
</div>

<script>
  let div2 = div.cloneNode(true); // 메시지 창 복제
  div2.querySelector('strong').innerHTML = '안녕히 가세요!'; // 복제한 메시지 창 내용 수정

  div.after(div2); // 복제한 메시지 창을 기존 메시지 창 다음에 보여줌
</script>