Perchè ottenere un HTML esterno non funziona?
-
04-10-2019 - |
Domanda
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>
Che cosa sto facendo di sbagliato?
Soluzione
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 HELLO
s 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.
Altri suggerimenti
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'));
Aggiorna DEMO
$(function() {
var html = $('<div>').append($('#my_div').clone()).html();
$('body').html( htmlspecialchars( '[' + html + ']' ) );
});
provare questo:
var result = $('<div></div>').append($('#my_div').clone()).html();
alert(result);
È 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;