我不能 copy/clone html 中的元素 jQuery

Question

我不能 clone/copy DOM 中的元素。

我的代码HTML:

<section class="_col-12 flexbox flex-column" id="580">
  <article class="flat-White">
  <img src="https://www.iana.org/_img/2013.1/rir-map.svg" class="campoNoticia img-fluid">
  <div class="campoNoticia p1em">
    <h1>Title</h1>
    <p>Parrafe</p>
   </div>
  </article>
</section>
<article>Article area</article>

我的jQuery代码：

$(document).on("click",".campoNoticia", function(evt) {
    var $imgRute = $(this).closest('section').find('img').html();
    $("article").append($imgRute);
});

我的 jsFiddle：

https://jsfiddle.net/yt2hbrdn/24/

Answer 1

如果您尝试克隆 img 元素，只需删除 .html() 即可附加 img 元素的克隆。

$(document).on("click",".campoNoticia", function(evt) {
    var $imgRute = $(this).closest('section').find('img');
    $("article").append($imgRute);
});

我不是 100% 清楚这就是您真正想要的，但它确实符合您在问题中描述的内容。

注意：这只会复制所选元素，不会深度克隆任何子元素（本示例代码中不存在）。因此，要进行深度克隆，您确实需要使用 clone() 作为其他答案提到的。

Answer 2

要复制被点击的图像并将其附加到下一篇文章，您可以使用

$(document).on("click", ".campoNoticia", function(evt) {
  var $imgRute = $(this).attr('src');
  $(this).closest('section').next("article").append('<img src="' + $imgRute + '">');
});

这会获取图像的 src 属性，然后搜索下一个 article 元素并附加一个副本。

$(document).on("click", ".campoNoticia", function(evt) {
  var $imgRute = $(this).attr('src');
  $(this).closest('section').next("article").append('<img src="' + $imgRute + '">');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="_col-12 flexbox flex-column" id="580">
  <article class="flat-White">
    <img src="https://www.iana.org/_img/2013.1/rir-map.svg" class="campoNoticia img-fluid">
    <div class="campoNoticia p1em">
      <h1>Title</h1>
      <p>Parrafe</p>
    </div>
  </article>
</section>
<article>Article Área</article>

Answer 3

这是因为 .html() 将 return 调用它的元素内的 HTML。

例如，考虑以下代码：

<div id="test"> Test HTML <div>

和 JS：

// This will return the inner HTML content of the div
$("#test").html(); // Test HTML

如上所述，它将不是 return 元素。它只会 return 它的内部 HTML.

在您的情况下，它是 img 元素，您可能已经知道，img 元素中没有任何内容可以放入，即您永远不会做这样的事情：

<!-- This is not valid -->
<img src="something"> Image </img>

因此，当您执行此操作时 var $imgRute = $(this).closest('section').find('img').html(); $imgRute 的值将是一个空字符串，而不是 img 元素本身。

我猜您想 .clone() 而不是 .html()。

这是 documentation 对 .clone() 的评价：

The .clone() method performs a deepcopy of the set of matched elements, meaning that it copies the matched elements as well as all of their descendant elements and text nodes.

因此，如果您想克隆 img 元素，您的代码将如下所示：

$(document).on("click", ".campoNoticia", function(evt) { 
    var $imgRute = $(this).closest('section').find('img').clone(); 
    $("article").append($imgRute); 
});

Answer 4

您可以使用克隆方法

$(document).on("click",".campoNoticia", function(evt) {
   var $imgRute = $(this).closest('section').find('img').clone();
   $("article").append($imgRute);
});

我不能 copy/clone html 中的元素 jQuery

I cant't copy/clone html element in jQuery

jquery

clone

element