Risposte:
Presumo che tu stia chiedendo la stringa HTML completa. In tal caso, qualcosa del genere farà il trucco:
$('<div>').append($('#item-of-interest').clone()).html();
Questo è spiegato in modo più approfondito qui , ma essenzialmente si crea un nuovo nodo per avvolgere l'elemento di interesse, eseguire le manipolazioni, rimuoverlo e acquisire l'HTML.
Se stai semplicemente cercando una rappresentazione in formato stringa, procedi con new String(obj)
.
Ho scritto la risposta originale nel 2009. A partire dal 2014, la maggior parte dei browser principali ora supporta outerHTML
come proprietà nativa (vedi, ad esempio, Firefox e Internet Explorer ), quindi puoi fare:
$('#item-of-interest').prop('outerHTML');
$(...)
data
potresti essere un po 'più specifico? Se stai cercando di inserire l' HTML all'interno di un tag puoi fare qualcosa del genere:
Snippet HTML:
<p><b>This is some text</b></p>
jQuery:
var txt = $('p').html(); // Value of text is <b>This is some text</b>
Il modo migliore per scoprire quali proprietà e metodi sono disponibili per un nodo HTML (oggetto) è fare qualcosa del tipo:
console.log($("#my-node"));
Da jQuery 1.6+ puoi semplicemente usare outerHTML per includere i tag HTML nell'output della stringa:
var node = $("#my-node").outerHTML;
$('#my-node').get(0).outerHTML
come nella risposta di
.outerHTML
non ha funzionato per me, ma .prop('outerHTML')
ha funzionato.
jQuery è qui, quindi:
jQuery.fn.goodOLauterHTML= function() {
return $('<a></a>').append( this.clone() ).html();
}
Restituisci tutto quel materiale HTML:
$('div' /*elys with HTML text stuff that you want */ ).goodOLauterHTML(); // alerts tags and all
Questo sembra funzionare bene per me:
$("#id")[0].outerHTML
La risposta accettata non copre i nodi di testo (undefined viene stampato).
Questo snippet di codice lo risolve:
var htmlElements = $('<p><a href="http://google.com">google</a></p>↵↵<p><a href="http://bing.com">bing</a></p>'),
htmlString = '';
htmlElements.each(function () {
var element = $(this).get(0);
if (element.nodeType === Node.ELEMENT_NODE) {
htmlString += element.outerHTML;
}
else if (element.nodeType === Node.TEXT_NODE) {
htmlString += element.nodeValue;
}
});
alert('String html: ' + htmlString);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Non è necessario clonare e aggiungere al DOM per utilizzare .html (), è possibile eseguire:
$('#item-of-interest').wrap('<div></div>').html()
wrap()
restituisce l'elemento avvolto, non l'elemento con cui è stato avvolto? Quindi questo dovrebbe dare l'html dell'elemento #item-of-interest
non è genitore div
(a meno che jQuery non sia cambiato da febbraio 2012).
Se vuoi stringere un elemento HTML per passarlo da qualche parte e analizzarlo di nuovo a un elemento prova a creare una query univoca per l'elemento:
// 'e' is a circular object that can't be stringify
var e = document.getElementById('MyElement')
// now 'e_str' is a unique query for this element that can be stringify
var e_str = e.tagName
+ ( e.id != "" ? "#" + e.id : "")
+ ( e.className != "" ? "." + e.className.replace(' ','.') : "");
//now you can stringify your element to JSON string
var e_json = JSON.stringify({
'element': e_str
})
di
//parse it back to an object
var obj = JSON.parse( e_json )
//finally connect the 'obj.element' varible to it's element
obj.element = document.querySelector( obj.element )
//now the 'obj.element' is the actual element and you can click it for example:
obj.element.click();