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 July 2015.

Sumário

O atributo outerHTML da estrutura DOM(Document object model) obtem um fragmento serializado de código HTML descrevendo o elemento incluindo seus descendentes. É possível substituir o elemento em questão com nós obtidos através da análise de uma string.

Sintaxe

var conteudo = elemento.outerHTML;

Na atribuição, conteudo armazena o fragmento de código HTML que descreve o elemento e seus descentes.

elemento.outerHTML = conteudo;

Atribui a elemento os nós obtidos pela análise da string conteudo, tendo nó pai de elemento como nó de contexto o para o algoritmo de análise do fragmento de código HTML.

Exemplos

Obtendo o valor da propriedade outerHtml de um elemento :

js
// HTML:
// <div id="d"><p>Conteúdo</p><p>Parágrafo</p></div>

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

// A string '<div id="d"><p>Conteúdo</p><p>Parágrafo</p></div>'
// é mostrada na janela do console.

Substituindo um nó atribuindo- lhe a propriedade outerHTML

js
// HTML:
// <div id="container"><div id="d">Isto é uma div.</div></div>

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

d.outerHTML = "<p>Este parágrafo substitui a div original</p>";
console.log(container.firstChild.nodeName); // mostra "P"

// A div #d não faz mais parte da estrutura do documento,
// O novo parágrafo a substituiu.

Notas

Se o elemento não tiver um nó pai, ou seja se o nó é a raiz do documento, tentar alterar sua propriedade outerHTML irá lançar um DOMException com o código de erro NO_MODIFICATION_ALLOWED_ERR. Por exemplo:

js
document.documentElement.outerHTML = "test"; // Irá lançar uma DOMException

inclusive, quando o elemento for substituído na estrutura do documento, a variável a qual a propriedade outerHTML foi atribuída ainda irá conter uma referência para o elemento original.

js
var p = document.getElementsByTagName("p")[0];
console.log(p.nodeName); // mostra: "P"
p.outerHTML = "<div>Esta div substituiu o parágrafo.</div>";
console.log(p.nodeName); // ainda contém "P";

Especificações

Specification
HTML
# dom-element-outerhtml

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
outerHTML

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Veja também