Comment convertir un objet jQuery en chaîne?


Réponses:


603

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).

Mise à jour

J'ai écrit la réponse originale en 2009. Depuis 2014, la plupart des principaux navigateurs prennent désormais en charge en outerHTMLtant que propriété native (voir, par exemple, Firefox et Internet Explorer ), vous pouvez donc faire:

$('#item-of-interest').prop('outerHTML');

25
Il est nul qu'il n'y ait pas de méthode pour le faire, mais c'est une excellente solution malgré tout.
Steve

2
cela supprime les étiquettes de la tête et du corps
ılǝ

1
@ user85461 Ce n'est pas un nœud DOM valide, cependant, il serait donc faux d'essayer d'appeler externeHTML dessus pour commencer. (Seul un petit sous-ensemble de ce qui peut entrer $(...)est un nœud DOM valide.)
John Feminella

1
@Moss, il vous donne le HTML interne, ou plus simplement, ce qui est à l' intérieur de l'élément, tandis que le HTML externe vous donne l'élément dans son ensemble
zakius

2
Notez que vous perdrezdata
Oleg

190

Avec jQuery 1.6, cela semble être une solution plus élégante:

$('#element-of-interest').prop('outerHTML');

5
@ Jean-PhilippeLeclerc Sur Firefox 15.0.1 (linux) cela fonctionne comme un charme.
dave

51

Utilisez simplement .get (0) pour récupérer l'élément natif et obtenez sa propriété externalHTML:

var $elem = $('<a href="#">Some element</a>');
console.log("HTML is: " + $elem.get(0).outerHTML);

Tant mieux car il conserve également mes attributs. Merci!
Rohit

21

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>

9

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;

4
c'est $('#my-node').get(0).outerHTMLcomme dans la réponse de
mppfiles

1
.outerHTMLn'a pas fonctionné pour moi, mais .prop('outerHTML')a fonctionné.
dnns

7

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

4

Cela semble bien fonctionner pour moi:

$("#id")[0].outerHTML

2
J'utilisais également cela, mais cela ne semble pas fonctionner pour Firefox 6.0.1.
mikong

2

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>


1

Pas besoin de cloner et d'ajouter au DOM pour utiliser .html (), vous pouvez faire:

$('#item-of-interest').wrap('<div></div>').html()

1
Mais ne 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).
David dit de réintégrer Monica le

0

Il peut être possible d'utiliser la jQuery.makeArray(obj)fonction utilitaire:

var obj = $('<p />',{'class':'className'}).html('peekaboo');
var objArr = $.makeArray(obj);
var plainText = objArr[0];

0

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();

-4
new String(myobj)

Si vous souhaitez sérialiser l'objet entier en chaîne, utilisez JSON .

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.