버튼 클릭 시 HTML 코드 복사하여 나타내는 방법

버튼 클릭 시 HTML 코드 복사하여 나타내는 방법에 대해 알아보겠습니다.

<form action="register" method="POST">
 <div class="group goal">
   <div class="goal__item--add">
     <div class="group">
       <label for="goalAddName">이름</label>
       <input id="goalAddName" type="text" name="goalAddName">
     </div>
     <div class="group">
       <label for="goalAddIcon">아이콘</label>
       <input id="goalAddIcon" type="text" name="goalAddIcon">
     </div>
   </div>
   <button id="goal">목표 추가</button>
   <div id="goalAdd"></div>
 </div>
 <div class="group font">
   <div class="font__item--add">
     <label for="fontFamily">폰트패밀리</label>
     <input id="fontFamily" type="text" name="fontFamily">
   </div>
     <button id="font">폰트 추가</button>
     <div id="fontAdd"></div>
 </div>
</form>

저는 form 태그를 이용하여 목표 추가 버튼 또는 폰트 추가 버튼을 클릭하면 label과 input을 복사하여 아래에 나타나는 HTML 코드를 짜봤습니다.

let addButton = document.querySelectorAll('button');

const addButtonClickHandle = (e) =>{
    e.preventDefault();
    let id = e.target.id;
    let appendArea = document.querySelector(`#${id}Add`);
    let html = document.querySelector(`.${id}__item--add`);
    let cloenHtml = html.cloneNode(true);
    appendArea.append(cloenHtml);
}

for(let i=0;i<addButton.length;i++){
    addButton[i].addEventListener('click',addButtonClickHandle);
}

button-click-html-clone

 

 

e.preventDefault()로 버튼 클릭 시 새로 고침 되는 것을 막았습니다. button의 id값을 가져와서 저장 후 복사 된 HTML 코드를 보여줄 공간과 저장할 HTML 코드를 저장합니다. 그리고 cloneNode를 이용하여 HTML 코드를 복사합니다.

[복사되어야 할 node].cloneNode(true|false)

여기서 복사되어야 할 node는 label과 input이 됩니다. true와 false 중 한 가지를 적어야 하는데 기준은 자식 요소까지 복사를 하느냐 아니냐에 따라 달라집니다. true는 자식 요소까지 복사하고 false는 선택한 요소만 복사합니다.

 

이후 append를 이용하여 복사한 HTML 코드를 보여줄 공간에 넣습니다.