jQuery, obtener html de un elemento completo

Question

Deseo obtener todo el html de un elemento seleccionado, no solo sus contenidos. .html() usa javascripts método innerHTML() según la documentación. HTML:

<div id="divs"> 
    <div id="div1"> 
    <p>Some Content</p> 
    </div> 
    <div id="div2"> 
    <p>Some Content</p> 
    </div> 
</div> 

Usando $('#divs:first').html(); devolverá sólo el elemento de párrafo. Quiero obtener el código HTML de todo el elemento, así:

<div id="div1"> 
    <p>Some Content</p> 
    </div> 

no puedo usar .parent porque esto volverá html de los dos divs niño.

Answer 1

Puede clonar para obtener todo el contenido, así:

var html = $("<div />").append($("#div1").clone()).html(); 

O que sea un complemento, la mayoría tienden a llamar a este "outerHTML", así:

jQuery.fn.outerHTML = function() { 
    return jQuery('<div />').append(this.eq(0).clone()).html(); 
}; 

Entonces que sólo puede llamar a:

var html = $("#div1").outerHTML(); 

Answer 2

las diferencias podrían no ser significativa en un caso de uso típico, pero utilizando el estándar DOM funcional dad

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

es aproximadamente dos veces más rápido que

$("<div />").append($("#el").clone()).html(); 

así que iría con:

/* 
* Return outerHTML for the first element in a jQuery object, 
* or an empty string if the jQuery object is empty; 
*/ 
jQuery.fn.outerHTML = function() { 
    return (this[0]) ? this[0].outerHTML : ''; 
}; 

Answer 3

Usted puede conseguir fácilmente propio niño y todos sus descendientes (hijos) con jQuery de Método de clonación (solo)

var child = $('#div div:nth-child(1)').clone(); 

var child2 = $('#div div:nth-child(2)').clone(); 

Obtendrá esto para la primera consulta como se le preguntó en la pregunta

<div id="div1"> 
    <p>Some Content</p> 
</div> 

Answer 4

Puede lograrlo con solo un código de línea.

$ ('# divs'). Get (0) .outerHTML;

Tan simple como eso.

Answer 5

escribir su html así:

<div id="element"> 
    <img src="image.jpg"> 
</div> 

entonces la función .html() Obtiene la etiqueta img! y se puede agregar en cualquier lugar :)