Warum eine äußere HTML immer nicht funktioniert?

Question

Ich versuche, die äußereen HTML auf zwei verschiedene Arten zu erhalten, basierend auf diesem Frage . Leider ist keiner von ihnen das erwartete Ergebnis geben:

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'))) + ']');
});

Die Ausgabe lautet:

[
Hello
]
[
Hello
]

Ich erwarte, dass das folgende Ergebnis: <div id='my_div'>Hello</div>

Live-Beispiel hier

Was mache ich falsch?

Answer 1

Zuerst Ihr erstes Beispiel funktioniert . Werfen Sie einen Blick auf Ihre Ausgabe in Firebug . Beachten Sie, dass, da die Ausgabe HTML ist als HTML . Beachten Sie, dass es neue Zeilen vor und nach dem HELLO ............... weil die HELLOs sind innerhalb DIVs!

Werfen Sie einen Blick:

---

Second w / jQuery, können Sie auch das Verfahren auf die Frage in meiner Antwort, die Sie im Zusammenhang mit :

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

jsFiddle Beispiel

Dies anhängt, einen Klon des Elements in Frage zu einem Objekt DIV jQuery und bekommt die innere HTML des DIV jQuery-Objekts .... das die Outerhtml des Elements in Frage.

Die allgemeine Form des Outerhtml eines Elements ist:

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

wo ElementSelector ist der jQuery-Selektor des Elements, das Outerhtml Sie wollen.

---

Hinweis: Die oben fügt keine neuen Elemente auf das DOM. $('<div>')...... wird nie auf das DOM hinzugefügt. Es bleibt lediglich jQuery-Objekt unabhängig von dem DOM.

Answer 2

Hier ist eine Funktion in der verwendeten lib pure.js die Outerhtml zu bekommen:

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

Und es das DOM zu nutzen:

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

Answer 3

UPDATE Mit DEMO

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

• htmlspecialchars Funktion

Answer 4

versuchen, diese:

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

Answer 5

Sie können get verwenden, um nativen DOM-Element herausziehen und dann die outerHTML verwenden wie:

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

oder

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