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

Question

This question may seem as a duplicate one, but I cannot seem to find a solution for my problem.

I am fetching content from external websites using the iFramely API. Which works for almost all requested websites.

However, if I try to fetch for example a post from Reddit and display this in a sort of custom made 'preview box' the requested iFrame get rendered correctly, so far so good.

When I try to copy the HTML content of the 'preview box' in order to append it to another div using jQuery. It does not copy all HTML elements.

Complete function

$('#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());
    ...
});

I've tried the jQuery functions:

• clone $('.embed-no-' + target_number).html($(embed_preview_container).clone());
• html $('.embed-no-' + target_number).html($(embed_preview_container).html());
• contents $('.embed-no-' + target_number).html($(embed_preview_container).contents());
• using append $('.embed-no-' + target_number).append($(embed_preview_container).html());

But all of these functions do not seem the copy the full "innerHTML" of the mentioned 'preview box' (see pictures below).

The copied HTML content inside the 'other div' with an empty body & head.

The actual content in side the 'preview box'.

I must note here that this only seems to be te case for Reddit related content. It works for example with Soundcloud/Spotify/Bandcamp .

PS. I am using jQuery version 3.3.1

Answer 1

Code sample below:-

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

Thanks

Answer 2

you can try this.

  $('#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

Alright, so I've found the solution/workaround to my own problem. Instead of copying the contents of the 'preview box', I stored the fetched HTML in a temporary variable, and appended the contents of this variable inside an 'another div' (this works).

Noteworthy, something strange that occurred to me while debugging is that the browser (in this case Chrome), does not render/display HTML correctly (see picture) (note the empty iFrame).

This is exactly what .html() copied. So long story short the following code worked for me:

// 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);
    ...
});