卡卡網(wǎng)

在本教程中，我們將了解如何動(dòng)態(tài)復(fù)制和插入 HTML 元素。

在這個(gè)例子中，我們使用 jQuery clone() 來復(fù)制 HTML 元素，然后通過使用 jquery 插入功能，我們將一個(gè)元素添加到目標(biāo) div。

要克隆的 HTML 文本框

此代碼包含文本框輸入以指定產(chǎn)品名稱和價(jià)格，克隆此輸入元素以添加多個(gè)產(chǎn)品條目。

demodownload

HTML代碼

<DIV id="demo-outer">
  <DIV id="product-header">
    <DIV class="float-left"> </DIV>
    <DIV class="float-left col-heading">項(xiàng)目名稱</DIV>
    <DIV class="float-left col-heading">商品價(jià)格</DIV>
  </DIV>
  <DIV id="product">
    <DIV class="product-item float-clear" style="clear:both;">
      <DIV class="float-left">
        <input type="checkbox" name="item_index[]" />
      </DIV>
      <DIV class="float-left">
        <input type="text" name="item_name[]" />
      </DIV>
      <DIV class="float-left">
        <input type="text" name="item_price[]" />
      </DIV>
    </DIV>
  </DIV>
  <DIV class="btn-action float-clear">
    <input type="button" name="add_item" value="Add More" onClick="addMore();" />
    <input type="button" name="del_item" value="Delete" onClick="deleteRow();" /> </DIV>
</DIV>

jQuery 克隆功能

在此腳本中，我們使用 jQuery 克隆和插入功能在產(chǎn)品表單中添加動(dòng)態(tài)文本框。

function addMore()
{
  $(".product-item:last").clone().insertAfter(".product-item:last");
}

function deleteRow()
{
  $('DIV.product-item').each(function(index, item)
  {
    jQuery(':checkbox', this).each(function()
    {
      if ($(this).is(':checked'))
      {
        $(item).remove();
      }
    });
  });
}

知識延伸

jQuery  clone() 方法

定義和用法

clone() 方法生成被選元素的副本，包含子節(jié)點(diǎn)、文本和屬性。

語法

$(selector).clone(includeEvents)

includeEvents 是可選參數(shù)。布爾值。規(guī)定是否復(fù)制元素的所有事件處理。默認(rèn)地，不包含事件處理器。

實(shí)例

克隆并追加一個(gè) p 元素：

$("button").click(function(){
  $("body").append($("p").clone());
});

標(biāo)簽: clone方法