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


J'essaie d'obtenir le HTML d'un objet sélectionné avec jQuery. Je suis au courant de .html() fonction; le problème est que j'ai besoin du HTML, y compris l'objet sélectionné (une ligne de table dans ce cas, où .html() retourne seulement les cellules à l'intérieur de la rangée).

J'ai cherché autour de moi et trouvé quelques méthodes 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 outerHtml fonctionnalité?


734
2018-03-10 19:09


origine


Réponses:


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: Eric Hu, ou 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();
};

176
2018-03-10 19:26



Je crois que actuellement (01/05/2012), tous les principaux navigateurs prennent en charge la fonction outerHTML. 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
$('.classSelector')[0].outerHTML

MODIFIER: Statistiques de support de base pour element.outerHTML


620
2018-05-01 23:00



Pas besoin de générer une fonction pour cela. Faites-le comme ceci:

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

(La console de votre navigateur affichera ce qui est enregistré, d'ailleurs. La plupart des navigateurs les plus récents depuis 2009 ont cette fonctionnalité.)

La magie est ceci à la fin:

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

Le clone signifie que vous ne dérangez pas réellement le DOM. Courez sans elle et vous verrez p tags insérés avant / après tous les liens hypertexte (dans cet exemple), ce qui n'est pas souhaitable. Donc, oui, utilisez .clone().

La façon dont cela fonctionne est qu'il faut chaque a tag, en fait un clone en RAM, s'enroule avec p étiquettes, obtient le parent de celui-ci (ce qui signifie la p tag), puis obtient le innerHTML propriété de celui-ci.

MODIFIER: Pris conseil et changé div tags à p les tags car ils tapent moins et fonctionnent de la même manière.


338
2018-01-19 21:50



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

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

Et pour définir:

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

Cela a fonctionné pour moi.

PS: Ceci est ajouté dans jQuery 1.6.


130
2018-03-19 08:06



Étendre jQuery:

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

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


88
2017-11-15 02:27



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

Sa façon de le faire est en fait une 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 de ce que IE a effectivement le outerHTML attribut (oui IE a effectivement quelques astuces utiles dans sa manche).

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

$.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;
    }
};

42
2018-03-10 12:49



Pour être vraiment jQuery-esque, vous pourriez vouloir outerHTML() être un getter et un setter et ont son comportement similaire à html() comme 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émonstration 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 si false est retourné).
  • 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().


17
2017-09-07 16:39



Vous pouvez aussi utiliser obtenir (Récupérez 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
  })
};

Ou

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

Choix multiple et renvoie un tableau de html.

$('input').outerHTML()

revenir:

["<input id="input1" type="text">", "<input id="input2" type="text">"]

14
2018-04-23 10:33