MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Element.outerHTML

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 :

// 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

// 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:

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.

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ção

Specification Status Comment
DOM Parsing and Serialization
The definition of 'Element.outerHTML' in that specification.
Living Standard  

Compatibilidade com os navegadores

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Suporte básico 11 (11) 0.2 4.0 7 1.3
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile

Suporte básico

(Yes) 11.0 (11) (Yes) (Yes) (Yes)

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: LucianoCardoso
 Última atualização por: LucianoCardoso,