jQueryのcloneとinsertAfterを使って既存のタグ要素を複製する方法｜DAD UNION

jQueryのcloneとinsertAfterを使用し、既存のタグ要素をクリックするとそのエリアを複製する方法をご紹介します。
フォームのテキストエリア（input）要素や登録項目を複製・追加する時に使えます。

Contents

既存のタグ要素を複製するCSSの記述
cloneとinsertAfterを使って複製するタグ要素のHTML記述
jQueryのcloneとinsertAfterを使って既存のタグ要素を複製するJavaScriptの記述
既存のタグ要素を複製するデモページ

既存のタグ要素を複製するCSSの記述

※複製するタグ要素（.fukusei）のCSS記述です。ここは重要では無いので、必要に応じて書き換えてください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:16px;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  position: relative;
}
.fukusei{
  padding: 4px;
  width: 380px;
  margin: 0 auto 16px auto;
  cursor: pointer;
  background-color: #cccccc;
}
</style>

cloneとinsertAfterを使って複製するタグ要素のHTML記述

※複製するタグ要素（class=”fukusei”）を用意します。必要に応じて変更して下さい。

<h1>以下のグレー箇所をクリックするとそのエリアが複製されます。</h1>

<div class="fukusei">このエリアをクリックすると、この要素が複製されます。</div>

jQueryのcloneとinsertAfterを使って既存のタグ要素を複製するJavaScriptの記述

※jquery-2.2.0.min.jsファイルを読み込みます。class=fukuseiタグエリアをクリックするとその要素の後に複製・追加する処理です。

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".fukusei").click(function(){
  $(this).clone(true).insertAfter(this);
});
</script>