使用jQuery将所有HTML内容从一个div复制到另一个

Question

这个问题似乎是重复的，但是我似乎找不到解决问题的方法。

我正在使用iFramely API从外部网站获取内容。几乎适用于所有请求的网站。

但是，如果我尝试从Reddit中获取帖子，并将其显示在某种定制的“预览框”中，那么到目前为止，请求的iFrame可以正确呈现。

当我尝试复制“预览框”的HTML内容以便使用jQuery将其附加到另一个div时。它不会复制所有HTML元素。

完整功能

$('#btn-add-extern-snippet').click(function() {
    let embed_preview_container = $('#embed-preview');
    let embed_target_number = $('#embed-target-number');
    let target_number = $(embed_target_number).val();

    $('.embed-no-' + target_number).html($(embed_preview_container).html());
    ...
});

我尝试了jQuery函数：

• 克隆$('.embed-no-' + target_number).html($(embed_preview_container).clone());
• html $('.embed-no-' + target_number).html($(embed_preview_container).html());
• 内容$('.embed-no-' + target_number).html($(embed_preview_container).contents());
• 使用附加$('.embed-no-' + target_number).append($(embed_preview_container).html());

但是所有这些功能似乎都不能复制提到的“预览框”的完整“ innerHTML”（请参见下面的图片）。

在“ other div”内部复制的HTML内容，其主体和头部为空。

“预览框”旁边的实际内容。

在这里我必须注意，这似乎仅与Reddit相关内容有关。例如，它可以与Soundcloud / Spotify / Bandcamp 一起使用。

PS。我正在使用jQuery版本3.3.1

Answer 1

下面的代码示例：-

$("#copyToDiv").append($("#copyFromDiv").html());

谢谢

Answer 2

您可以尝试一下。

  $('#copy').click(function(){
    $('#div2').html($('#div1').html());
  });

#div1{
  background:green;
}
#div2{
  background:blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='copy'>Copy</button>
<div id='div1'>
  <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.
  </p>
  <div>
    <h2>Lorem Ipsum</h2>
    <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles
    </p>
    </div>
    <div id='div2'></div>

Answer 3

好的，所以我已经找到了解决自己问题的解决方案。我没有复制“预览框”的内容，而是将获取的HTML存储在一个临时变量中，然后将此变量的内容附加到“另一个div”中（此方法有效）。

值得注意的是，调试时发生在我身上的奇怪现象是浏览器（在本例中为Chrome）无法正确呈现/显示HTML（请参见图片）（请注意空白的iFrame）。

这正是.html()复制的内容。长话短说，以下代码对我有用：

// temporary variable for storing html.
let currentSnippet = '';

$('#btn-add-extern-snippet').click(function() {
    let embed_preview_container = $('#embed-preview');
    let embed_target_number = $('#embed-target-number');
    let target_number = $(embed_target_number).val();

    $('.embed-no-' + target_number).html(currentSnippet);
    ...
});