[jquery]フォーム追加のappendチェーンを詳説

appendで動的フォーム追加をしよう

イメージ図　→https://gyazo.com/3583ecfc924f4845861df37d124db646
学習対象者　jqueryでのdom取得がわかる方

学べること

1. appendの使い方
2. タグ内属性での変数の使い方
3. セレクトボックスselect-optionのコピーの仕方
4. cloneでのコピーの問題点(所感)

序章

dom取得と新規の違い

jquery_new.js

//　取得
$('タグ') $('.クラス名') $('#id名') $('[type=checkbox]')

// 新規
$('<タグ>')

appendの使い方

基本的な使い方

jquery_append.js

親.append(子)
// 親の中に子要素が入る
$('form').append('<p>')
// 親form要素の中に新たにp要素が入る

原則:親要素の最後に子要素が挿入される

課題

hoge.html

<form>
  <p>
    <input type="checkbox" id="check1" value="1">
    <select>
      <option value="1">選択肢1</option>
      <option value="2">選択肢2</option>
    <select>
  </p>
</form>
<ボタン>

ボタンを押すとp要素以下のinput,select(option)をform(親)に追加する
このようなフォームを想定します。

• idを一意にしたいので、変数で変える
• checkboxのvalueもフォームに送るパラメーターなので変える
• セレクトボックスは何も変わらないのでそのままコピーする

タグ内属性での変数の使い方

jquery_append.js

var num = 2
var inputNew = $('<input>',{
 id: 'check' + num
 value: num
});

// 抽象化
var 数字の変数名 = 数字
var タグ変数名 = $('タグ',{
 属性: '変わらない属性名部分' + 数字の変数名
});

セレクトボックスselect-optionのコピーの仕方

セレクトボックスの中身は選択肢も属性も変える必要がないので、cloneでコピーしちゃいましょう

jquery_append.js

var optionClone = $('select').children('option').clone(false)
// 既存のselectから子要素のオプションをコピー

var selectNew = $('<select>').append(optionClone)
// 新規セレクト要素にコピーしたoptionクローンを入れる

最後に、pタグにinputNewとselectNewを入れ、それをformに入れれば完成です。

jquery_append.js

var pNew = $('<p>').append(inputNew, selectNew)
// 新規p要素にinputNewとselectNewを入れる

$('form').append(pNew)
// 既存form要素にpNewを入れる

cloneでのコピーの問題点

cloneという便利なものがあるのに、このappendチェーン使う理由って何？って思うかもしれません。
cloneは取得したタグをクローンします。この際、取得する条件を厳密にしないと、倍々に増えていきます。
今回の例で言うと、pを条件緩めにクローンすると、1回クリックする毎に、2,4,8,16と増えていきます。
また、フォームの値もそのままcloneしてしまうので、この初期化も念頭に記述しなければならないです。
一応、下記にclone倍々・継承問題の解決法の1つを残しておきます。

バイバイ、倍々

twice.html

<input type="text" class="origin hidden">
<form>
  <input type="text" class="origin">
</form>

twice.css

.hidden{
   display: none;
}

jquery_twice.js

const inputClone =  $('.hidden').clone(false).removeClass('hidden')
// display: none;がかかっているclass="hidden"を消す

$('form').append(inputClone)

.cssでも変わりますが、classを消してcssを変えるという発想も使えるので頭の片隅にでも。

余談-変数格納とカスタム属性

数字の変数の使い方はわかったけど、保持の方法がわからない問題は、以下の解決法でどうでしょうか

1. カスタム属性に格納する
2. １を取得し、変数宣言
3. ２の変数++;で１足す
4. .attrで変数を再格納

jquery初心者なので覚えた方がいいテクニックがあれば是非コメントお願いします！