We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

Etiquetas y colaboradores del documento

Colaboradores en esta página: Grijander81
Última actualización por: Grijander81,