Obtenir le HTML externe de l'élément sélectionné

Question

J'essaie d'obtenir le code HTML d'un objet sélectionné avec jQuery. Je suis conscient de la .html() Le problème est que j'ai besoin du HTML incluant l'objet sélectionné (une ligne de tableau dans ce cas, où .html() ne renvoie que les cellules à l'intérieur de la ligne).

J'ai cherché et trouvé quelques méthodes de type "hackish" pour cloner un objet, l'ajouter à un div nouvellement créé, etc, etc, mais cela semble vraiment sale. Existe-t-il une meilleure méthode, ou la nouvelle version de jQuery (1.4.2) offre-t-elle un moyen plus efficace de cloner un objet ? outerHtml la fonctionnalité ?

Answer 1

Je crois qu'actuellement (5/1/2012), tous les principaux navigateurs prennent en charge la fonction outerHTML. Il me semble que cet extrait est suffisant. Personnellement, je choisirais de le mémoriser :

// Gives you the DOM element without the outside wrapper you want
$('.classSelector').html()

// Gives you the outside wrapper as well only for the first element
$('.classSelector')[0].outerHTML

// Gives you the outer HTML for all the selected elements
var html = '';
$('.classSelector').each(function () {
    html += this.outerHTML;
});

//Or if you need a one liner for the previous code
$('.classSelector').get().map(function(v){return v.outerHTML}).join('');

EDITAR : Statistiques de base du support pour element.outerHTML

• Firefox (Gecko) : 11 .... Sorti en 2012-03-13
• Chrome : 0,2 ............... Publié le 2008-09-02
• Internet Explorer 4.0... Sorti en 1997
• Opera 7 ...................... Publié le 28 janvier 2003
• Safari 1.3 ................... Sorti en 2006-01-12

Answer 2

Il n'est pas nécessaire de générer une fonction pour cela. Faites-le simplement comme ceci :

$('a').each(function(){
    var s = $(this).clone().wrap('<p>').parent().html();
    console.log(s);
});

(La console de votre navigateur montrera ce qui est enregistré, d'ailleurs. La plupart des derniers navigateurs depuis environ 2009 ont cette fonctionnalité).

La magie, c'est ça, au bout :

.clone().wrap('<p>').parent().html();

Le clone signifie que vous ne perturbez pas réellement le DOM. Exécutez-le sans lui et vous verrez p insérées avant/après tous les hyperliens (dans cet exemple), ce qui n'est pas souhaitable. Donc, oui, utilisez .clone() .

La façon dont il fonctionne est qu'il prend chaque a en fait un clone dans la RAM, l'enveloppe avec p obtient le parent de celle-ci (c'est-à-dire la balise p ), puis obtient la balise innerHTML propriété de celui-ci.

EDITAR : J'ai suivi le conseil et j'ai changé div balises pour p parce qu'il y a moins de frappe et que cela fonctionne de la même manière.

Answer 3

2014 Edit : La question et cette réponse datent de 2010. À l'époque, aucune meilleure solution n'était largement disponible. Maintenant, beaucoup d'autres réponses sont meilleures : celle d'Eric Hu, ou celle de Re Capcha par exemple.

Ce site semble avoir une solution pour vous : jQuery : outerHTML | Yelotofu

jQuery.fn.outerHTML = function(s) {
    return s
        ? this.before(s).remove()
        : jQuery("<p>").append(this.eq(0).clone()).html();
};

Answer 4

Qu'en est-il : prop('outerHTML') ?

var outerHTML_text = $('#item-to-be-selected').prop('outerHTML');

Et à mettre en place :

$('#item-to-be-selected').prop('outerHTML', outerHTML_text);

Ça a marché pour moi.

PS : Ceci est ajouté dans jQuery 1.6 .

Answer 5

Étendre jQuery :

(function($) {
  $.fn.outerHTML = function() {
    return $(this).clone().wrap('<div></div>').parent().html();
  };
})(jQuery);

Et utilise-le comme ça : $("#myTableRow").outerHTML();