J'essaie d'obtenir le HTML d'un objet sélectionné avec jQuery. Je connais la .html()fonction; le problème est que j'ai besoin du code 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 très «hackish» pour cloner un objet, l'ajouter à un div nouvellement créé, etc., etc., mais cela semble vraiment sale. Existe-t-il un meilleur moyen ou la nouvelle version de jQuery (1.4.2) offre-t-elle des outerHtmlfonctionnalités?

Édition 2014: 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: celles d'Eric Hu ou de Re Capcha par exemple.

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

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

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

// 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('');

EDIT : statistiques de support de base pourelement.outerHTML

• Firefox (Gecko): 11 .... Publié le 2012-03-13
• Chrome: 0.2 ............... Publié le 2008-09-02
• Internet Explorer 4.0 ... sorti en 1997
• Opera 7 ...................... Paru le 28-01-2003
• Safari 1.3 ................... Sortie le 01-01-2006

Pas besoin de générer une fonction pour cela. Faites comme ça:

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

(La console de votre navigateur affichera ce qui est connecté, soit dit en passant. La plupart des derniers navigateurs depuis environ 2009 ont cette fonctionnalité.)

La magie est la fin:

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

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

La façon dont cela fonctionne est qu'il prend chaque abalise, en fait un clone dans la RAM, encapsule avec des pbalises, en obtient le parent (c'est-à-dire la pbalise), puis en obtient la innerHTMLpropriété.

EDIT : a pris des conseils et a changé les divbalises en pbalises parce que c'est moins de frappe et fonctionne de la même manière.

Et pour prop('outerHTML'):?

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

Et pour régler:

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

Ça a marché pour moi.

PS : Ceci est ajouté dans jQuery 1.6 .

Étendez jQuery:

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

Et utilisez-le comme ceci: $("#myTableRow").outerHTML();

Je suis d'accord avec Arpan (13 décembre 10 5:59).

Sa façon de le faire est en fait une bien meilleure façon de le faire, car vous n'utilisez pas de clone. La méthode de clonage prend beaucoup de temps, si vous avez des éléments enfants, et personne d'autre ne semble se soucier qu'IE ait réellementouterHTML attribut (oui IE a en fait QUELQUES astuces utiles dans sa manche).

Mais je créerais probablement son script un peu différent:

$.fn.outerHTML = function() {
    var $t = $(this);
    if ($t[0].outerHTML !== undefined) {
        return $t[0].outerHTML;
    } else {
        var content = $t.wrap('<div/>').parent().html();
        $t.unwrap();
        return content;
    }
};

Pour être vraiment jQuery-esque, vous voudrez peut- outerHTML()être être un getter et un setter et avoir un comportement aussi similaire html()que possible:

$.fn.outerHTML = function (arg) {
    var ret;

    // If no items in the collection, return
    if (!this.length)
        return typeof arg == "undefined" ? this : null;
    // Getter overload (no argument passed)
    if (!arg) {
        return this[0].outerHTML || 
            (ret = this.wrap('<div>').parent().html(), this.unwrap(), ret);
    }
    // Setter overload
    $.each(this, function (i, el) {
        var fnRet, 
            pass = el,
            inOrOut = el.outerHTML ? "outerHTML" : "innerHTML";

        if (!el.outerHTML)
            el = $(el).wrap('<div>').parent()[0];

        if (jQuery.isFunction(arg)) { 
            if ((fnRet = arg.call(pass, i, el[inOrOut])) !== false)
                el[inOrOut] = fnRet;
        }
        else
            el[inOrOut] = arg;

        if (!el.outerHTML)
            $(el).children().unwrap();
    });

    return this;
}

Démo de travail: http://jsfiddle.net/AndyE/WLKAa/

Cela nous permet de passer un argument à outerHTML, qui peut être

• une fonction annulable - function (index, oldOuterHTML) { }- où la valeur de retour deviendra le nouveau code HTML de l'élément (sauf s'il falseest renvoyé).
• une chaîne, qui sera définie à la place du code HTML de chaque élément.

Pour plus d'informations, consultez les documents jQuery pour html().

Vous pouvez également utiliser get (récupérer les éléments DOM correspondant à l'objet jQuery.).

par exemple:

$('div').get(0).outerHTML;//return "<div></div>"

Comme méthode d'extension:

jQuery.fn.outerHTML = function () {
  return this.get().map(function (v) {
    return v.outerHTML
  }).join()
};

Ou

jQuery.fn.outerHTML = function () {
  return $.map(this.get(), function (v) {
    return v.outerHTML
  }).join()
};

Choix multiple et retournez le html externe de tous les éléments correspondants.

$('input').outerHTML()

revenir:

'<input id="input1" type="text"><input id="input2" type="text">'

Pour créer un plugin jQuery COMPLET en tant que .outerHTML, ajoutez le script suivant à n'importe quel fichier js et incluez-le après jQuery dans votre en-tête:

_{mise à jour La} nouvelle version a un meilleur contrôle ainsi qu'un service plus convivial de jQuery Selector! :)

;(function($) {
    $.extend({
        outerHTML: function() {
            var $ele = arguments[0],
                args = Array.prototype.slice.call(arguments, 1)
            if ($ele && !($ele instanceof jQuery) && (typeof $ele == 'string' || $ele instanceof HTMLCollection || $ele instanceof Array)) $ele = $($ele);
            if ($ele.length) {
                if ($ele.length == 1) return $ele[0].outerHTML;
                else return $.map($("div"), function(ele,i) { return ele.outerHTML; });
            }
            throw new Error("Invalid Selector");
        }
    })
    $.fn.extend({
        outerHTML: function() {
            var args = [this];
            if (arguments.length) for (x in arguments) args.push(arguments[x]);
            return $.outerHTML.apply($, args);
        }
    });
})(jQuery);

Cela vous permettra non seulement d'obtenir le HTML externe d'un élément, mais également d'obtenir un retour de plusieurs éléments à la fois dans un tableau! et peut être utilisé dans les deux styles standard jQuery en tant que tels:

$.outerHTML($("#eleID")); // will return outerHTML of that element and is 
// same as
$("#eleID").outerHTML();
// or
$.outerHTML("#eleID");
// or
$.outerHTML(document.getElementById("eleID"));

Pour plusieurs éléments

$("#firstEle, .someElesByClassname, tag").outerHTML();

Exemples d'extraits:

console.log('$.outerHTML($("#eleID"))'+"\t", $.outerHTML($("#eleID"))); 
console.log('$("#eleID").outerHTML()'+"\t\t", $("#eleID").outerHTML());
console.log('$("#firstEle, .someElesByClassname, tag").outerHTML()'+"\t", $("#firstEle, .someElesByClassname, tag").outerHTML());

var checkThisOut = $("div").outerHTML();
console.log('var checkThisOut = $("div").outerHTML();'+"\t\t", checkThisOut);
$.each(checkThisOut, function(i, str){ $("div").eq(i).text("My outerHTML Was: " + str); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawgit.com/JDMcKinstry/ce699e82c7e07d02bae82e642fb4275f/raw/deabd0663adf0d12f389ddc03786468af4033ad2/jQuery.outerHTML.js"></script>
<div id="eleID">This will</div>
<div id="firstEle">be Replaced</div>
<div class="someElesByClassname">At RunTime</div>
<h3><tag>Open Console to see results</tag></h3>

vous pouvez aussi le faire de cette façon

document.getElementById(id).outerHTML

où id est l'id de l'élément que vous recherchez

J'ai utilisé la solution de Jessica (qui a été éditée par Josh) pour faire fonctionner externalHTML sur Firefox. Le problème est cependant que mon code cassait parce que sa solution enveloppait l'élément dans un DIV. L'ajout d'une ligne de code supplémentaire a résolu ce problème.

Le code suivant vous donne le externalHTML en laissant l'arborescence DOM inchangée.

$jq.fn.outerHTML = function() {
    if ($jq(this).attr('outerHTML'))
        return $jq(this).attr('outerHTML');
    else
    {
    var content = $jq(this).wrap('<div></div>').parent().html();
        $jq(this).unwrap();
        return content;
    }
}

Et utilisez-le comme ceci: $ ("# myDiv") .uterHTML ();

J'espère que quelqu'un le trouvera utile!

// no cloning necessary    
var x = $('#xxx').wrapAll('<div></div>').parent().html(); 
alert(x);

Violon ici: http://jsfiddle.net/ezmilhouse/Mv76a/

Si le scénario ajoute dynamiquement une nouvelle ligne, vous pouvez utiliser ceci:

var row = $(".myRow").last().clone();
$(".myRow").last().after(row);

.myrowest le nom de classe du <tr>. Il fait une copie de la dernière ligne et l'insère en tant que nouvelle dernière ligne. Cela fonctionne également dans IE7 , tandis que la [0].outerHTMLméthode ne permet pas les affectations dans ie7

node.cloneNode () ne ressemble guère à un hack. Vous pouvez cloner le nœud et l'ajouter à n'importe quel élément parent souhaité, et également le manipuler en manipulant des propriétés individuelles, plutôt que d'avoir à, par exemple, exécuter des expressions régulières dessus, ou l'ajouter au DOM, puis le manipuler par la suite.

Cela dit, vous pouvez également parcourir les attributs de l'élément pour en construire une représentation sous forme de chaîne HTML. Il semble probable que c'est ainsi que n'importe quelle fonction externalHTML serait implémentée si jQuery en ajoutait une.

J'ai utilisé la solution de Volomike mise à jour par Jessica. Il suffit d'ajouter une vérification pour voir si l'élément existe et de le rendre vide au cas où il ne le ferait pas.

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

Bien sûr, utilisez-le comme:

$('table#buttons').outerHTML();

Vous pouvez trouver une bonne option .outerHTML () ici https://github.com/darlesson/jquery-outerhtml .

Contrairement à .html () qui ne renvoie que le contenu HTML de l'élément, cette version de .outerHTML () renvoie l'élément sélectionné et son contenu HTML ou le remplace par la méthode .replaceWith () mais avec la différence qui permet au HTML de remplacement d'être hérité par l'enchaînement.

Des exemples peuvent également être vus dans l'URL ci-dessus.

Notez que la solution de Josh ne fonctionne que pour un seul élément.

On peut dire que le HTML "externe" n'a vraiment de sens que si vous avez un seul élément, mais il y a des situations où il est logique de prendre une liste d'éléments HTML et de les transformer en balisage.

Étendant la solution de Josh, celle-ci gérera plusieurs éléments:

(function($) {
  $.fn.outerHTML = function() {
    var $this = $(this);
    if ($this.length>1)
      return $.map($this, function(el){ return $(el).outerHTML(); }).join('');
    return $this.clone().wrap('<div/>').parent().html();
  }
})(jQuery);

Edit: un autre problème avec la solution de Josh a été corrigé, voir le commentaire ci-dessus.

Une autre solution similaire avec ajout remove()de l'objet DOM temporaire.

J'ai fait ce test simple avec externalHTML étant une solution de tokimon (sans clone), et externalHTML2 étant une solution de jessica (clone)

console.time("outerHTML");
for(i=0;i<1000;i++)
 {                 
  var html = $("<span style='padding:50px; margin:50px; display:block'><input type='text' title='test' /></span>").outerHTML();
 }                 
console.timeEnd("outerHTML");

console.time("outerHTML2");

 for(i=0;i<1000;i++)
 {                 
   var html = $("<span style='padding:50px; margin:50px; display:block'><input type='text' title='test' /></span>").outerHTML2();
  }                 
  console.timeEnd("outerHTML2");

et le résultat dans mon navigateur Chrome (Version 20.0.1132.57 (0)) était

externeHTML
: 81 ms externeHTML2: 439 ms

mais si nous utilisons la solution tokimon sans la fonction native externalHTML (qui est maintenant prise en charge dans presque tous les navigateurs)

on a

ExternalHTML
: 594ms ExternalHTML2: 332ms

et il y aura plus de boucles et d'éléments dans des exemples du monde réel, donc la combinaison parfaite serait

$.fn.outerHTML = function() 
{
  $t = $(this);
  if( "outerHTML" in $t[0] ) return $t[0].outerHTML; 
  else return $t.clone().wrap('<p>').parent().html(); 
}

la méthode de clonage est donc plus rapide que la méthode wrap / unwrap
(jquery 1.7.2)

Voici un plugin externalHTML très optimisé pour jquery: ( http://jsperf.com/outerhtml-vs-jquery-clone-hack/5 => les 2 autres extraits de code rapide ne sont pas compatibles avec certains navigateurs comme FF <11)

(function($) {

  var DIV = document.createElement("div"),
      outerHTML;

  if ('outerHTML' in DIV) {
    outerHTML = function(node) {
      return node.outerHTML;
    };
  } else {
    outerHTML = function(node) {
      var div = DIV.cloneNode();
      div.appendChild(node.cloneNode(true));
      return div.innerHTML;
    };
  }

  $.fn.outerHTML = function() {
    return this.length ? outerHTML(this[0]) : void(0);
  };

})(jQuery);

@Andy E => Je ne suis pas d'accord avec toi. uterHMTL n'a pas besoin d'un getter ET d'un setter: jQuery nous donne déjà 'replaceWith' ...

@mindplay => Pourquoi rejoignez-vous tous les externalHTML? jquery.html renvoie uniquement le contenu HTML du premier élément.

(Désolé, je n'ai pas assez de réputation pour écrire des commentaires)

Court et doux.

[].reduce($('.x'), function(i,v) {return i+v.outerHTML}, '')

ou un événement plus doux avec l'aide des fonctions fléchées

[].reduce.call($('.x'), (i,v) => i+v.outerHTML, '')

ou sans jQuery du tout

[].reduce.call(document.querySelectorAll('.x'), (i,v) => i+v.outerHTML, '')

ou si vous n'aimez pas cette approche, vérifiez que

$('.x').get().reduce((i,v) => i+v.outerHTML, '')

C'est assez simple avec JavaScript vanille ...

document.querySelector('#selector')

Ceci est idéal pour changer des éléments sur le dom mais ne fonctionne PAS pour, par exemple, lors du passage d'une chaîne html en jquery comme ceci:

$('<div id="foo">Some <span id="blog">content</span></div>').find('#blog').outerHTML();

Après quelques manipulations, j'ai créé une fonction qui permet à ce qui précède de fonctionner, par exemple pour les chaînes html:

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

$.html = el => $("<div>"+el+"</div>").html().trim();

Je suis tombé sur ce problème en cherchant une réponse à mon problème, à savoir que j'essayais de supprimer une ligne du tableau, puis de l'ajouter à nouveau au bas du tableau (car je créais dynamiquement des lignes de données mais je voulais afficher un `` Ajouter nouveau ''). Enregistrer la ligne de type en bas).

J'ai eu le même problème, car il renvoyait le innerHtml, donc il manquait les balises TR, qui contenaient l'ID de cette ligne et signifiait qu'il était impossible de répéter la procédure.

La réponse que j'ai trouvée est que la remove()fonction jquery retourne en fait l'élément, qu'il supprime, en tant qu'objet. Donc, pour supprimer et rajouter une ligne, c'était aussi simple que cela ...

var a = $("#trRowToRemove").remove();            
$('#tblMyTable').append(a);  

Si vous ne supprimez pas l'objet mais souhaitez le copier ailleurs, utilisez clone()plutôt la fonction.

Plugin jQuery comme raccourci pour obtenir directement l'élément HTML complet:

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

Et utilisez-le comme ceci: $(".element").outerHTML();

$("#myNode").parent(x).html(); 

Où 'x' est le numéro de nœud, commençant par 0 comme premier, devrait obtenir le bon nœud que vous voulez, si vous essayez d'en obtenir un spécifique. Si vous avez des nœuds enfants, vous devriez vraiment mettre un identifiant sur celui que vous voulez, cependant, pour se concentrer uniquement sur celui-ci. L'utilisation de cette méthodologie et aucun «x» n'a bien fonctionné pour moi.

Solution simple.

var myself = $('#div').children().parent();

$("#myTable").parent().html();

Je ne comprends peut-être pas votre question correctement, mais cela obtiendra le code HTML de l'élément parent de l'élément sélectionné.

C'est ça que tu cherches?