我不能使用cloneNode？

Question

我想克隆这个：

<div class="media" id='this_comment'>
<a class="media-left" href="#">link</a>
<p>something</p>
</div>

通过以下方式：

var x = $('#this_comment');
var clone = x.content.cloneNode(true);

我尝试了clone = x.cloneNode(true)，clone = x.clone(true)，但是控制台仍然抛出"Cannot read property 'cloneNode‘of undefined at ...“请帮帮我！

Answer 1

因为cloneNode()是一个普通的JS方法，所以不能在JQuery引用的元素上使用它。

虽然x.clone(true)应该可以工作。也许，您的脚本在DOM完全加载之前就已经运行了。您可以将脚本放在正文的底部，也可以用$(document).ready(function(){包装您的代码。

演示：

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  $(document).ready(function(){
    var x = $('#this_comment');
    var clone = x.clone(true).appendTo( "body" );
  });
</script>

<div class="media" id='this_comment'>
  <a class="media-left" href="#">link</a>
  <p>something</p>
</div>

​

Answer 2

像这样使用：

var clone = x.cloneNode(true);

此外，您还需要使用克隆项插入方法。如下所示：

document.body.appendChild(clone);

​

var x = document.querySelector('#this_comment');
var clone = x.cloneNode(true);
document.body.appendChild(clone);

<div class="media" id='this_comment'>
  <a class="media-left" href="#">link</a>
  <p>something</p>
</div>

​