Perchè ottenere un HTML esterno non funziona?

Question

I cercare di ottenere il codice HTML esterno in due modi diversi, in base a questo interrogare . Purtroppo, nessuno di loro sta dando i risultati sperati:

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

L'output è:

[
Hello
]
[
Hello
]

Mi aspetto che il seguente risultato: <div id='my_div'>Hello</div>

vivo esempio qui

Che cosa sto facendo di sbagliato?

Answer 1

In primo luogo, il tuo primo esempio funziona bene . Date un'occhiata al vostro output in Firebug . Nota, che da quando l'output HTML è reso come HTML . Nota che ci sono a capo prima e dopo la HELLO ............... perché i HELLOs sono div dentro!

Date un'occhiata:

---

Secondo w / jQuery, si potrebbe anche usare il metodo nella mia risposta alla domanda si è collegato al :

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

jsFiddle esempio

Questo aggiunge un clone dell'elemento in questione a un oggetto DIV jQuery e ottiene il codice HTML interno dell'oggetto DIV jQuery .... che è l'outerHTML dell'elemento in questione.

La forma generale della outerHTML di un elemento è:

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

dove ElementSelector è il selettore jQuery dell'elemento cui outerHTML si desidera.

---

Nota: È possibile che questo non aggiunge nuovi elementi al DOM. $('<div>')...... non viene mai aggiunto al DOM. Resta solo jQuery oggetto indipendente del DOM.

Answer 2

Ecco una funzione utilizzata nella lib pure.js per ottenere l'outerHTML:

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

E per utilizzare nel modo DOM:

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

Answer 3

Aggiorna DEMO

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

  

  
• htmlspecialchars funzione
  

Answer 4

provare questo:

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

Answer 5

È possibile utilizzare get per tirare fuori elemento DOM nativo e quindi utilizzare il outerHTML come:

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

o

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