Element.outerHTML

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.

Resumen

El atributoouterHTML del interfaz DOMelement 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 elementoelement y a sus descendientes.

element.outerHTML = content;

Reemplaza el elemento por los nodos generados del análisis de la cadenacontent con el padre deelement como el nodo de contexto para el algoritmo de procesado del fragmento.

Ejemplos

Ontener el valor de la propiedasouterHTML de un elemento:

// HTML:// <div><p>Content</p><p>Further Elaborated</p></div>d = document.getElementById("d");dump(d.outerHTML);// La cadena '<div><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 propiedadouterHTML:

// HTML:// <div><div>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 propiedadouterHTML lanzará unaDOMException con el código de errorNO_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 propiedadouterHTML 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";