¿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');

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

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

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>

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;

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

4

Esto parece funcionar bien para mí:

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

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>


1

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

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

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];

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

-4
new String(myobj)

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.