Element.outerHTML

Resumen

El atributo outerHTML del interfaz DOM element obtiene el fragmento HTML serializado que describe el elemento incluyendo sus descendientes. Puede ser asignado para reemplazar el elemento por los nodos resultantes de examinar de la cadena proporcionada.

Sintaxis

var content = element.outerHTML;

Al retorno, content contendr谩 el fragmento de HTML serializado que describe al elemento element y a sus descendientes.

element.outerHTML = content;

Reemplaza el elemento por los nodos generados del an谩lisis de la cadena content con el padre de element como el nodo de contexto para el algoritmo de procesado del fragmento.

Ejemplos

Ontener el valor de la propiedas outerHTML de un elemento:

// HTML:
// <div id="d"><p>Content</p><p>Further Elaborated</p></div>

d = document.getElementById("d");
dump(d.outerHTML);

// La cadena '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
// es volcada a la ventana de la consola.

Reemplazar un nodo mediante la asignaci贸n de la propiedad outerHTML:

// HTML:
// <div id="container"><div id="d">This is a div.</div></div>

container = document.getElementById("container");
d = document.getElementById("d");
console.log(container.firstChild.nodeName); // logs "DIV"

d.outerHTML = "<p>This paragraph replaced the original div.</p>";
console.log(container.firstChild.nodeName); // logs "P"

// El div #d no ser谩 parte del 谩rbol del documento,
// el nuevo p谩rrafo lo reemplazar谩.

Notas

Si el elemento no tiene elemento padre, esto es, si es el elemento ra铆z del documento, la asignaci贸n de su propiedad outerHTML lanzar谩 una DOMException con el c贸digo de error NO_MODIFICATION_ALLOWED_ERR. Por ejemplo:

document.documentElement.outerHTML = "test";  // lanza una DOMException

Adem谩s, aunque el elemento es reemplazado en el documento, la variable cuya propiedad outerHTML fue asignada continuar谩 conteniendo una referencia al elemento original:

var p = document.getElementsByTagName("p")[0];
console.log(p.nodeName); // muestra: "P"
p.outerHTML = "<div>This div replaced a paragraph.</div>";
console.log(p.nodeName); // sigue mostrando: "P";

Especificaci贸n

Especificaci贸n Estado Observaciones
DOM Parsing and Serialization
La definici贸n de 'Element.outerHTML' en esta especificaci贸n.
Working Draft  

Compatibilidad con navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Prestaci贸n Firefox (Gecko) Chrome Internet Explorer Opera Safari
Soporte b谩sico 11 (11) 0.2 4.0 7 1.3
Prestiaci贸n Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte b谩sico (Yes) 11.0 (11) (Yes) (Yes) (Yes)

Ver tambi茅n