4/3 Javascript コードレシピ集 学習

jsの本を借りたので、毎日継続して定着させていきます。

クリックしたら要素を複製

アンケートのフォームを追加する時に応用出来るはず。

main.js

// 要素を複製 複製したい要素.cloneNode(真偽値) appendChild等と共に使うこと trueを外すと複製されない

// my-clone-boxを取得
const cloneBox = document.getElementById('my-clone-box');

// my-clone-boxをクリックすると発火
cloneBox.addEventListener('click', () =>
{
  // 親要素のcontainerを取得
  const container = document.querySelector('.container');

  // my-clone-boxを複製する
  const clone = cloneBox.cloneNode(true);

  // 複製したmy-clone-boxを、containerの末尾に挿入する
  container.appendChild(clone);
});

js.html

<div class="container">
  <div id="my-clone-box">クリックするとこの要素を複製します</div>
</div>

参考
https://www.imamura.biz/blog/26914