jQuery 要素をコピーして追加し、IDを書き換える

Ajax

jQuery 要素をコピーして追加し、IDを書き換える

inputボックスの数を、ユーザーが任意に操作できるように、動的にinputボックスなどを追加したい場合があると思います。

 //Html
 <div id="roots">
  <div id="each_root">
   <div class="detail">
    <input type="text" name="root">
    <input type="button" value="行き先を追加" onclick="addInput();">
   </div>
  </div>
 </div>

 //Javascript
 function addInput(){
   $("#each_root").clone().appendTo("#roots");
 }

ついでに、何かの用途のためにコピーした中身の、IDを連番でつけてそれぞれを識別したい場合、IDを次のように動的に書き換えます。

 //Javascript　上記の改訂版
 var i = 0;
 function addInput(){
   i++;
   $("#each_root").    //#each_rootを取得
          clone(true).   //上で取得した中身をコピー
              find('.detail').  //そのコピーした中身のdetailとついている要素を取得
                  attr('id',i).  //上で取得した要素の中のidをiとする
                        appendTo("#roots");  //#rootsに追加
 }

• 役に立ちました。でも文脈からすると要素名はrootではなくrouteかな？とおもいました — {2017-06-22 (木) 10:27:55}