jQuery, obtenez le HTML d'un élément entier

Question

Question simple, je souhaite obtenir l'intégralité du code HTML d'un élément sélectionné, et pas seulement de son contenu. .html () utilise la méthode javascripts innerHTML () conformément à 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 de $('#divs:first').html(); renverra uniquement l'élément de paragraphe. Je veux obtenir le code HTML pour l'élément entier, comme suit:

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

Je ne peux pas utiliser .parent car cela renverra le code HTML des deux divs enfants.

Answer 1

Vous pouvez le cloner pour obtenir le contenu entier, comme ceci:

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

Ou en faire un plugin, la plupart ont tendance à appeler cela "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

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

est environ deux fois plus rapide que

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

donc j'irais 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 et tous ses enfants avec la méthode Clone () de Jquery, 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é dans la question

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