jQuery, obtenir html d'un élément entier

Question

Je souhaite obtenir l'intégralité du code HTML d'un élément sélectionné, pas seulement son contenu. .html() utilise la méthode javascripts innerHTML() en fonction de la documentation. HTML:

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

L'utilisation $('#divs:first').html(); retourne juste l'élément de paragraphe. Je veux obtenir le code HTML pour l'élément entier, comme ceci:

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

Je ne peux pas utiliser .parent parce que cela va revenir html des deux divs enfants.

Answer 1

Vous pouvez cloner pour obtenir le contenu, comme ceci:

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

Ou faire un plug-in, la plupart ont tendance à appeler cette « outerHTML », comme ceci:

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

Ensuite, vous pouvez simplement appeler:

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

Answer 2

Les différences peuvent ne pas être significatives dans un cas d'utilisation typique, mais en utilisant le DOM standard ity

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

est environ deux fois plus vite que

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

donc j'aller avec:

/* 
* 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

Vous pouvez facilement obtenir l'enfant lui-même et tous ses des décédés (enfants) avec Jquery de Clone() méthode, juste

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

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

Vous obtiendrez ceci pour la première requête comme demandé en question

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

Answer 4

Vous pouvez obtenir cela avec un seul code de ligne.

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

Aussi simple que cela.

Answer 5

écrire votre code HTML comme ceci:

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

alors la fonction .html() obtenir le tag img! et vous pouvez ajouter n'importe où. :)