¿Cómo se convierte un objeto jQuery en una cadena?

Respuestas:

603

Supongo que está pidiendo la cadena HTML completa. Si ese es el caso, algo así hará el truco:

$('<div>').append($('#item-of-interest').clone()).html(); 

Esto se explica con mayor profundidad aquí , pero esencialmente se crea un nuevo nodo para envolver el elemento de interés, hacer las manipulaciones, eliminarlo y obtener el HTML.

Si estás justo después de una representación de cadena, entonces ve con new String(obj).

Actualizar

Escribí la respuesta original en 2009. A partir de 2014, la mayoría de los principales navegadores ahora son compatibles outerHTMLcomo propiedad nativa (consulte, por ejemplo, Firefox e Internet Explorer ), por lo que puede hacer:

$('#item-of-interest').prop('outerHTML');
John Feminella
fuente
25
Es una mierda que no haya un método para hacer esto, pero esta es una gran solución independientemente.
Steve
2
Esto quita la cabeza y el cuerpo etiquetas
ılǝ
1
@ user85461 Sin embargo, ese no es un nodo DOM válido, por lo que sería un error tratar de llamar a externalHTML para comenzar. (Solo un pequeño subconjunto de lo que puede entrar $(...)es un nodo DOM válido).
John Feminella
1
@Moss te da html interno, o más simple, lo que está dentro del elemento, mientras que exteriorHtml te da el elemento en su conjunto
zakius
2
Tenga en cuenta que perderádata
Oleg
190

Con jQuery 1.6, esta parece ser una solución más elegante:

$('#element-of-interest').prop('outerHTML');
nickh
fuente
55
@ Jean-PhilippeLeclerc En Firefox 15.0.1 (Linux) funciona de maravilla.
Dave
51

Simplemente use .get (0) para obtener el elemento nativo y obtener su propiedad externalHTML:

var $elem = $('<a href="#">Some element</a>');
console.log("HTML is: " + $elem.get(0).outerHTML);
mppfiles
fuente
Mucho mejor, ya que conserva mis atributos también. ¡Gracias!
Rohit
21

¿Podrías ser un poco más específico? Si está tratando de obtener el HTML dentro de una etiqueta, puede hacer algo como esto:

Fragmento de HTML:

<p><b>This is some text</b></p>

jQuery:

var txt = $('p').html(); // Value of text is <b>This is some text</b>
Alex Rockwell
fuente
9

La mejor manera de averiguar qué propiedades y métodos están disponibles para un nodo HTML (objeto) es hacer algo como:

console.log($("#my-node"));

Desde jQuery 1.6+ puede usar externalHTML para incluir las etiquetas HTML en su salida de cadena:

var node = $("#my-node").outerHTML;
crystalh
fuente
44
es $('#my-node').get(0).outerHTMLcomo en la respuesta de
mppfiles
1
.outerHTMLno funcionó para mí, pero lo .prop('outerHTML')hizo.
Dnns
7

jQuery está aquí, así que:

jQuery.fn.goodOLauterHTML= function() {
    return $('<a></a>').append( this.clone() ).html();
}

Devuelve todas esas cosas HTML:

$('div' /*elys with HTML text stuff that you want */ ).goodOLauterHTML(); // alerts tags and all
Max reuniones
fuente
4

Esto parece funcionar bien para mí:

$("#id")[0].outerHTML
Johan Dettmar
fuente
2
También estaba usando esto, pero esto no parece funcionar para Firefox 6.0.1.
mikong
2

La respuesta aceptada no cubre los nodos de texto (se imprime indefinido).

Este fragmento de código lo resuelve:

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>

Martin Sznapka
fuente
1

No es necesario clonar y agregar al DOM para usar .html (), puede hacer lo siguiente:

$('#item-of-interest').wrap('<div></div>').html()
St Kiss
fuente
1
¿Pero no wrap()devuelve el elemento envuelto, no el elemento con el que fue envuelto? Entonces, esto debería dar el html del elemento #item-of-interest no es padre div(a menos que jQuery haya cambiado desde febrero de 2012).
David dice que reinstale a Mónica el
0

Es posible usar la jQuery.makeArray(obj)función de utilidad:

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

Si desea stringificar un elemento HTML para pasarlo a algún lugar y analizarlo nuevamente en un elemento, intente crear una consulta única para el 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
})

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();
Yaron Helfer
fuente
-4
new String(myobj)

Si desea serializar todo el objeto en cadena, use JSON .

Vasil
fuente