Réponses:
Je suppose que vous demandez la chaîne HTML complète. Si c'est le cas, quelque chose comme ça fera l'affaire:
$('<div>').append($('#item-of-interest').clone()).html();
Ceci est expliqué plus en détail ici , mais essentiellement vous créez un nouveau nœud pour envelopper l'élément d'intérêt, effectuez les manipulations, supprimez-le et saisissez le code HTML.
Si vous êtes juste après une représentation de chaîne, alors allez-y new String(obj)
.
J'ai écrit la réponse originale en 2009. Depuis 2014, la plupart des principaux navigateurs prennent désormais en charge en outerHTML
tant que propriété native (voir, par exemple, Firefox et Internet Explorer ), vous pouvez donc faire:
$('#item-of-interest').prop('outerHTML');
$(...)
est un nœud DOM valide.)
data
Pouvez-vous être un peu plus précis? Si vous essayez de mettre le code HTML à l' intérieur d'une balise, vous pouvez faire quelque chose comme ceci:
Extrait HTML:
<p><b>This is some text</b></p>
jQuery:
var txt = $('p').html(); // Value of text is <b>This is some text</b>
La meilleure façon de savoir quelles propriétés et méthodes sont disponibles pour un nœud HTML (objet) est de faire quelque chose comme:
console.log($("#my-node"));
À partir de jQuery 1.6+, vous pouvez simplement utiliser externalHTML pour inclure les balises HTML dans votre sortie de chaîne:
var node = $("#my-node").outerHTML;
$('#my-node').get(0).outerHTML
comme dans la réponse de
.outerHTML
n'a pas fonctionné pour moi, mais .prop('outerHTML')
a fonctionné.
jQuery est ici, donc:
jQuery.fn.goodOLauterHTML= function() {
return $('<a></a>').append( this.clone() ).html();
}
Retournez tous ces trucs HTML:
$('div' /*elys with HTML text stuff that you want */ ).goodOLauterHTML(); // alerts tags and all
Cela semble bien fonctionner pour moi:
$("#id")[0].outerHTML
La réponse acceptée ne couvre pas les nœuds de texte (undefined est imprimé).
Cet extrait de code le résout:
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>
Pas besoin de cloner et d'ajouter au DOM pour utiliser .html (), vous pouvez faire:
$('#item-of-interest').wrap('<div></div>').html()
wrap()
retourne pas l'élément enveloppé, pas l'élément avec lequel il a été enveloppé? Donc, cela devrait donner le html de l' élément #item-of-interest
not it's parent div
(sauf si jQuery a changé depuis février 2012).
Si vous souhaitez stringifier un élément HTML afin de le passer quelque part et le réanalyser vers un élément, essayez de créer une requête unique pour l'élément:
// '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
})
que
//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();