Question

<div class="parent main">
  <div class="child">
    <p>Some Text...</p>
    <p>Some more...</p>
  </div>
</div>
<div class="input-group dynamic-stuff">
  <button type="button" class="btn btn-success add_more"><i class="fa fa-plus"></i></button>
</div>

我想克隆.parent div并在.child div中追加一个元素，然后在.dynamic-stuff之前附加克隆的html。

由此产生以下结果：

<div class="parent main">
  <div class="child">
    <p>Some Text...</p>
    <p>Some more...</p>
  </div>
</div>
<div class="parent main">
  <div class="child">
    <p>Some Text...</p>
    <p>Some more...</p>
    <p>Dynamically Added Element..</p> //This is what I want to insert...
  </div>
</div>
<div class="input-group dynamic-stuff">
  <button type="button" class="btn btn-success add_more"><i class="fa fa-plus"></i></button>
</div>

我试过这样的

$('.add_more').click(function(e) {
    e.preventDefault();
    $('.main').first().clone().children().append('<p>Dynamically Added Element..</p>').insertBefore('.dynamic-stuff').show();
});

但是这段代码只会添加.child div而不是完全父级。

Answer 1

你可以在jquery中使用append方法..

使用

$（“。child”）。append（“＆lt; tag＆gt;动态添加元素..＆lt; / tag＆gt;”）

Answer 2

您可以使用.clone()克隆父级，然后使用.append()上的children()添加一行，最后insertBefore()将其插入到您想要的位置：

＆＃13;

$('.add_more').click(function(e) {
  e.preventDefault();
  var copy = $(".parent").clone();
  copy.children().append("<p>Dynamically Added Element..</p>")
  copy.insertBefore(".dynamic-stuff");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent main">
  <div class="child">
    <p>Some Text...</p>
    <p>Some more...</p>
  </div>
</div>
<div class="input-group dynamic-stuff">
  <button type="button" class="btn btn-success add_more"><i class="fa fa-plus"></i></button>
</div>

＆＃13;

Answer 3

你可以使用selector $（'。main：first'）而不是$（'。main'）。first（）

如何在克隆的html对象的子div中插入一个元素？

3 个答案: