valor texto span obtener etiqueta change cambiar asignar jquery

jquery - texto - Obtener el HTML externo del elemento seleccionado



obtener valor de label jquery (28)

Estoy tratando de obtener el HTML de un objeto seleccionado con jQuery. Soy consciente de la función .html() ; 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).

Busqué y encontré algunos métodos muy "piratas" para clonar un objeto, agregarlo a un div creado recientemente, etc, etc., pero esto parece realmente sucio. ¿Hay alguna forma mejor o la nueva versión de jQuery (1.4.2) ofrece algún tipo de funcionalidad de outerHtml ?

¿Qué hay de: 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 añade en jQuery 1.6 .

Aquí hay un complemento de externalHTML muy optimizado para jquery: ( http://jsperf.com/outerhtml-vs-jquery-clone-hack/5 => los otros 2 fragmentos de código rápido no son compatibles con algunos navegadores como 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 => No estoy de acuerdo contigo. outerHMTL no necesita un getter Y un setter: jQuery ya nos dio ''replaceWith'' ...

@mindplay => ¿Por qué te unes a externalHTML? jquery.html devuelve solo el contenido HTML del elemento FIRST.

(Lo siento, no tengo suficiente reputación para escribir comentarios)

Corto y dulce.

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

o evento más dulce con ayuda de las funciones de flecha.

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

o sin jQuery en absoluto

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

o si no te gusta este enfoque, comprueba que

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

Creo que actualmente (5/1/2012), todos los principales navegadores soportan 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

Encontré esto mientras buscaba una respuesta a mi problema, es que estaba intentando eliminar una fila de la tabla y luego volver a agregarla en la parte inferior de la tabla (porque estaba creando filas de datos dinámicamente pero quería mostrar un ''Agregar nuevo Grabar ''tipo fila en la parte inferior).

Tuve el mismo problema, en el sentido de que estaba devolviendo el innerHtml, faltaban las etiquetas TR, que contenían el ID de esa fila y que era imposible repetir el procedimiento.

La respuesta que encontré fue que la función jquery remove() realidad devuelve el elemento, que elimina, como un objeto. Entonces, para eliminar y volver a agregar una fila fue tan simple como esto ...

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

Si no está eliminando el objeto pero desea copiarlo en otro lugar, use la función clone() lugar.

Esto es bastante simple con vainilla JavaScript ...

document.querySelector(''#selector'')

Esto es genial para cambiar elementos en el dom pero NO funciona, es decir, cuando se pasa una cadena html a jquery de esta manera:

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

Después de alguna manipulación, he creado una función que permite que lo anterior funcione, es decir, para cadenas html:

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

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

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

Pero probablemente crearía su guión 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; } };

Extender jQuery:

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

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

He hecho esta prueba simple con outerHTML siendo la solución tokimon (sin clonar), y outerHTML2 siendo la solución jessica (clon)

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");

y el resultado en mi navegador de cromo (Versión 20.0.1132.57 (0)) fue

externalHTML: 81ms
externalHTML2: 439ms

pero si usamos la solución tokimon sin la función outerHTML nativa (que ahora es compatible con casi todos los navegadores)

obtenemos

externalHTML: 594ms
externalHTML2: 332ms

y habrá más bucles y elementos en los ejemplos del mundo real, por lo que la combinación perfecta sería

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

así que el método de clonación es en realidad más rápido que el método de envolver / desenvolver
(jQuery 1.7.2)

He utilizado la solución de Volomike actualizada por Jessica. Acaba de agregar una verificación para ver si el elemento existe, y lo hizo regresar en blanco en caso de que no exista.

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

Por supuesto, úsalo como:

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

No hay necesidad de generar una función para ello. Solo hazlo así:

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

(La consola de su navegador mostrará lo que está registrado, por cierto. La mayoría de los navegadores más recientes desde 2009 tienen esta función).

La magia es esta al final:

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

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

La forma en que funciona es que toma cada a etiqueta, hace un clon de la misma en la RAM, se ajusta con las etiquetas p , obtiene el padre de la misma (es decir, la etiqueta p ), y luego obtiene la propiedad innerHTML de la misma.

EDITAR : tomó consejos y cambió las etiquetas div etiquetas p porque es menos tipográfico y funciona igual.

Para hacer un complemento de jQuery COMPLETO como .outerHTML , agregue la siguiente secuencia de comandos a cualquier archivo js e incluya después de jQuery en su encabezado:

Actualizar ¡La nueva versión tiene mejor control y un servicio más amigable con Selector de jQuery! :)

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

¡Esto le permitirá no solo obtener el externalHTML de un elemento, sino también obtener un retorno de múltiples elementos a la vez! y se puede utilizar en ambos estilos estándar de jQuery como tales:

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

Para multiples elementos

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

Fragmentos de ejemplos:

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>

Para ser realmente jQuery-esque, puede que outerHTML() sea ​​un getter y un setter y tenga su comportamiento tan 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 function (index, oldOuterHTML) { } - function (index, oldOuterHTML) { } - donde el valor de retorno se convertirá en el nuevo HTML para el elemento (a menos que se devuelva false ).
  • una cadena, que se establecerá en lugar del HTML de cada elemento.

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

Puede encontrar una buena opción .outerHTML () aquí https://github.com/darlesson/jquery-outerhtml .

A diferencia de .html () que devuelve solo el contenido HTML del elemento, esta versión de .outerHTML () devuelve el elemento seleccionado y su contenido HTML o lo reemplaza como método .replaceWith () pero con la diferencia que permite que el reemplazo del HTML sea heredado por el encadenamiento

También se pueden ver ejemplos en la URL anterior.

Si el escenario está agregando una nueva fila dinámicamente, puede usar esto:

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

.myrow es el nombre de clase de <tr> . Hace una copia de la última fila y la inserta como una última última fila. Esto también funciona en IE7 , mientras que el método [0].outerHTML no permite asignaciones en ie7

Solución simple.

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

También puede usar get (Recuperar los elementos DOM que coinciden con el objeto jQuery).

p.ej:

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

Como método de extensión:

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

O

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

Opción múltiple y devolver una matriz de html.

$(''input'').outerHTML()

regreso:

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

También puedes hacerlo de esta manera.

document.getElementById(id).outerHTML

donde id es el id del elemento que buscas

Tenga en cuenta que la solución de Josh solo funciona para un solo elemento.

Podría decirse que el HTML "externo" solo tiene sentido cuando se tiene un solo elemento, pero hay situaciones en las que tiene sentido tomar una lista de elementos HTML y convertirlos en marcado.

Extendiendo la solución de Josh, ésta manejará múltiples elementos:

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

Edición: se ha solucionado otro problema con la solución de Josh, ver el comentario anterior.

Usé la solución de Jessica (que fue editada por Josh) para hacer que outerHTML funcionara en Firefox. Sin embargo, el problema es que mi código se estaba rompiendo porque su solución envolvió el elemento en un DIV. Añadiendo una línea más de código resolví ese problema.

El siguiente código le da el valor exteriorHTML dejando el árbol DOM sin cambios.

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

Y úselo así: $ ("# myDiv"). OuterHTML ();

¡Espero que alguien lo encuentre útil!

node.cloneNode () apenas parece un hack. Puede clonar el nodo y agregarlo a cualquier elemento padre deseado, y también manipularlo mediante la manipulación de propiedades individuales, en lugar de tener que, por ejemplo, ejecutar expresiones regulares en él, o agregarlo al DOM, luego manipularlo a posteriori.

Dicho esto, también podría iterar sobre los atributos del elemento para construir una representación de cadena HTML del mismo. Parece probable que esta sea la forma en que se implementaría cualquier función outerHTML si jQuery agregara una.

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

Edición de 2014: la pregunta y esta respuesta son de 2010. En ese momento, no había una solución mejor disponible. Ahora, muchas de las otras respuestas son mejores: la de Eric Hu, o la de Re Capcha, 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(); };

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

Donde ''x'' es el número de nodo, comenzando con 0 como el primero, debe obtener el nodo correcto que desea, si está tratando de obtener uno específico. Sin embargo, si tiene nodos secundarios, realmente debería colocar una ID en la que desea, para que solo se centre en esa. Usar esa metodología y ninguna ''x'' funcionó bien para mí.

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

Quizás no entiendo su pregunta correctamente, pero esto obtendrá el html del elemento primario del elemento seleccionado.

¿Es eso lo que buscas?