使用jquery选择器追加元素

时间:2016-07-07 09:21:45

标签: javascript jquery html

我需要重新创建并在按钮点击时将我的模板div附加到父div,这可以多次完成

<div id = "parent">
   <div id = "child_1">
       <div><input type = "text"></div>
       <div><input type = "text"></div>
       //several inputs and divs
   </div>
</div>

和我的剧本

//on button click event
var template = $("#parent").children().last();
template.attr("id","child_2"); //just a sample of dynamic id
$("#parent").append(template);

但这不起作用

2 个答案:

答案 0 :(得分:2)

在你追加它之前你需要clone()一个孩子的副本,否则你只需将当前元素放回原来的位置。

var template = $("#parent").children().last().clone();

Working example

答案 1 :(得分:0)

试试这个:

var html = $("#parent").html();
var i = 1;

$("button").on("click",function(){
  i++;
  $("#parent").append(html.replace('id="child_1"','id="child_' + i + '"'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id = "parent">
   <div id = "child_1">
       <div><input type = "text"></div>
       <div><input type = "text"></div>
       //several inputs and divs
   </div>
</div>
<button>Click</button>