jQuery, récupère le HTML d’un élément entier

Je souhaite obtenir le code HTML complet d’un élément sélectionné, pas seulement son contenu. .html () utilise la méthode innerHTML () de javascripts selon la documentation. HTML:

 

Utiliser $('#divs:first').html(); ne renverra que l’élément de paragraphe. Je veux obtenir le HTML pour l’élément entier, comme ceci:

  

Some Content

Je ne peux pas utiliser .parent car cela renverra html des deux div enfants.

Vous pouvez le cloner pour obtenir l’intégralité du contenu, comme ceci:

 var html = $("
").append($("#div1").clone()).html();

Ou en faire un plugin, la plupart ont tendance à appeler cela “outerHTML”, comme ceci:

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

Ensuite, vous pouvez simplement appeler:

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

Les différences peuvent ne pas être significatives dans un cas d’utilisation classique, mais en utilisant la fonctionnalité DOM standard

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

est environ deux fois plus rapide que

 $("
").append($("#el").clone()).html();

alors j’irais avec:

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

Vous pouvez y parvenir avec un seul code de ligne.

$ (‘# divs’). get (0) .outerHTML;

Aussi simple que cela.

Vous pouvez facilement obtenir l’enfant lui-même et tous ses descendants (enfants) avec la méthode Clone () de Jquery, simplement

 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

 

Some Content

écris ton code HTML comme ceci:

 

alors la fonction .html () obtient la balise img! et vous pouvez append n’importe où 🙂