Pourquoi obtenir un HTML externe ne fonctionne pas?

Question

J'essaie d'obtenir le code HTML externe de deux façons différentes, en fonction de cette question . Malheureusement, aucun d'entre eux donne le résultat escompté:

HTML:

<div id='my_div'>Hello</div>

JS:

$(function() {
    document.write('[' + $('#my_div').clone().wrapAll("<div />").parent().get(0).innerHTML + ']<br />');
    document.write('[' + (new XMLSerializer().serializeToString(document.getElementById('my_div'))) + ']');
});

La sortie est:

[
Hello
]
[
Hello
]

Je pense que le résultat suivant: <div id='my_div'>Hello</div>

exemple en direct

Qu'est-ce que je fais mal?

Answer 1

Tout d'abord, votre premier exemple fonctionne très bien . Jetez un oeil à votre sortie Firebug . Notez que depuis votre sortie est HTML est rendu HTML . Notez qu'il ya des sauts de ligne avant et après la HELLO ............... parce que les HELLOs sont à l'intérieur DIVs!

Jetez un oeil:

---

Deuxième w / jQuery, vous pouvez aussi utiliser la méthode dans ma réponse à la question que vous lié à :

var outerHTML =  $('<div>').append( $("#my_div").clone() ).html();

exemple jsFiddle

Ce clone de ajoute un l'élément en question à un objet DIV jQuery et obtient le HTML intérieur de l'objet DIV jQuery .... qui est le outerHTML de l'élément en question.

La forme générale de la outerHTML d'un élément est:

$('<div>').append( $(ElementSelector).clone() ).html();

où ElementSelector est le sélecteur de jQuery de l'élément dont vous voulez outerHTML.

---

Note: ajoute ci-dessus pas de nouveaux éléments au DOM. $('<div>')...... est jamais ajouté au DOM. Il reste simplement objet jQuery indépendant du DOM.

Answer 2

Voici une fonction utilisée dans le répertoire lib pure.js pour obtenir le outerHTML:

function outerHTML(node){
    return node.outerHTML || new XMLSerializer().serializeToString(node);
}

Et pour l'utiliser comme DOM:

var html = outerHTML(document.getElementById('my_div'));

Answer 3

UPDATE DEMO

   $(function() {
        var html = $('<div>').append($('#my_div').clone()).html();
        $('body').html( htmlspecialchars( '[' + html + ']' ) );
   });

  

  
• fonction htmlspecialchars
  

Answer 4

essayez ceci:

var result = $('<div></div>').append($('#my_div').clone()).html();
alert(result);

Answer 5

Vous pouvez utiliser get pour tirer élément DOM natif puis utilisez la outerHTML comme:

var html = $('#my_div').get(0).outerHTML;

ou

var html = $('#my_div')[0].outerHTML;