Pregunta Obtener el HTML externo del elemento seleccionado


Estoy tratando de obtener el HTML de un objeto seleccionado con jQuery. Soy consciente de que .html() función; el problema es que necesito el HTML que incluye el objeto seleccionado (una fila de la tabla en este caso, donde .html() solo devuelve las celdas dentro de la fila).

He buscado y he encontrado algunos métodos de tipo muy "hackish" para clonar un objeto, agregarlo a un div recién creado, etc., etc., pero esto parece realmente sucio. ¿Hay alguna manera mejor, o la nueva versión de jQuery (1.4.2) ofrece algún tipo de outerHtml funcionalidad?


734
2018-03-10 19:09


origen


Respuestas:


Edición de 2014: la pregunta y esta respuesta son de 2010. En ese momento, no había una mejor solución ampliamente disponible. Ahora, muchas de las otras respuestas son mejores: Eric Hu's, o Re Capcha's por ejemplo.

Este sitio parece tener una solución para usted: 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



Creo que actualmente (01/05/2012), todos los principales navegadores admiten la función outerHTML. Me parece que este fragmento es suficiente. Yo personalmente elegiría memorizar esto:

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

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

EDITAR: Estadísticas básicas de soporte para element.outerHTML


620
2018-05-01 23:00



No es necesario generar una función para ello. Solo hazlo así:

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

(Por cierto, la consola de su navegador mostrará lo que está conectado. La mayoría de los navegadores más recientes desde 2009 tienen esta característica).

La magia es esta al final:

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

El clon significa que en realidad no estás molestando al DOM. Ejecútalo sin él y verás p etiquetas insertadas antes / después de todos los hipervínculos (en este ejemplo), lo cual es indeseable. Entonces, sí, usa .clone().

La forma en que funciona es que se necesita cada a etiqueta, hace una copia de ella en la RAM, se envuelve con p etiquetas, obtiene el padre de la misma (es decir, el p etiqueta), y luego obtiene el innerHTML propiedad de eso.

EDITAR: Tomó consejo y cambió div etiquetas a p etiquetas porque es menos tipeo y funciona de la misma manera.


338
2018-01-19 21:50



Qué pasa: prop('outerHTML')?

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

Y para establecer:

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

Funcionó para mí

PD: Esto se agrega en jQuery 1.6.


130
2018-03-19 08:06



Extienda jQuery:

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

Y úsalo así: $("#myTableRow").outerHTML();


88
2017-11-15 02:27



Estoy de acuerdo con Arpan (13 de diciembre, 2010, 5:59).

Su forma de hacerlo es en realidad una forma MUCHO mejor de hacerlo, ya que no usas clones. El método de clonación consume mucho tiempo, si tiene elementos secundarios, y a nadie más parece importarle que IE realmente TENGA el outerHTML atributo (sí IE en realidad tiene ALGUNOS trucos útiles en la manga).

Pero probablemente crearía su script un poco diferente:

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



Para ser verdaderamente jQuery-esque, es posible que desee outerHTML() ser un getter y un colocador y su comportamiento es similar a html() como sea posible:

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

Demostración de trabajo: http://jsfiddle.net/AndyE/WLKAa/

Esto nos permite pasar un argumento a outerHTML, que puede ser

  • una función cancelable - function (index, oldOuterHTML) { } - donde el valor de retorno se convertirá en el nuevo HTML para el elemento (a menos que false es regresado).
  • una cadena, que se establecerá en lugar del HTML de cada elemento.

Para obtener más información, consulte los documentos jQuery para html().


17
2017-09-07 16:39