javascript - jQuery:前置和附加 <p> 标签

Question

我有一个在页面加载时克隆的元素:

(function($) {
    $(document).ready(function() {
        $("#linked_product_data").prepend($(".parent").clone());
        $(".parent").prepend($("<p>"));
        $(".parent").append($("</p>"));
        $(".parent").append($("<hr>"));     
        $(".parent").prepend($("<p>Grouped Product:</p>"));         
    });
}(jQuery));

我正在尝试将此克隆元素包装在 <p> 中标签，正如您在代码中看到的那样。然而，当我查看源代码时，我发现该页面实际上已预先添加了匹配的 <p> 对。标签，有人知道这个问题的解决方案吗？

输出如下:

<div class="bfi-parent">
    <p>Grouped Product:</p>
    <p></p>
    Test |
    <a href="h#"> Manage</a>
    <ul style="list-style-type:none">
        <p></p>
        <hr>
</div>

Answer 1

根据您的描述，您正在尝试的实际上是将克隆包装起来

(function($) {
  $(document).ready(function() {
    var $clone = $(".parent").clone().prependTo('#linked_product_data');
    $clone.wrap("<p />").append("<hr />");
    $clone.prepend("<p>Grouped Product:</p>");
  });
}(jQuery));

#linked_product_data {
  border: 1px solid grey;
  padding: 5px;
}
#linked_product_data > p {
  border: 1px solid blue;
  padding: 5px;
}
.parent {
  border: 1px solid red;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="parent">some content</span>
<div id="linked_product_data"></div>