Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado. Consulte Mais informação.

As propriedades DOM innerHTML e outerHTML permitem que você leia e escreva conteúdo em uma página da web. Você pode usá-los para buscar marcação ou fazer alterações nela, e os dois são semelhantes em muitos aspectos. Mas há uma diferença significativa.

Ao trabalhar com o DOM, você usará innerHTML e outerHTML de forma bem diferente. Descubra como usar essas duas propriedades com exemplos práticos.

O que é HTML interno?

A propriedade innerHTML faz parte de o DOM e você pode acessá-lo via JavaScript. Você pode usá-lo para obter ou definir o conteúdo de um elemento. Este conteúdo exclui a própria tag do elemento e inclui apenas a marcação que representa os filhos do elemento, na forma de uma string.

Considere este exemplo de código:

<html>
<corpo>
<peu ia="meu P">Eu sou um parágrafo.p>


<roteiro>
documento.getElementById("meu P").innerHTML = "Olá Mundo";
roteiro>
corpo>


html>
instagram viewer

Em seu navegador, você verá um parágrafo padrão com o texto de substituição, assim:

A propriedade innerHTML seleciona e altera o conteúdo doelemento neste exemplo.

O que é HTML externo?

A propriedade outerHTML é como innerHTML de várias maneiras. Você pode usá-lo para obter ou definir o conteúdo de um elemento selecionado. No entanto, também define a marcação que representa o próprio elemento. Isso inclui a tag de abertura, quaisquer propriedades e, quando relevante, a tag de fechamento.

Revisite o exemplo anterior para ver como o outerHTML difere:

<html>
<corpo>
<peu ia="meu P">Eu sou um parágrafo.p>


<roteiro>
documento.getElementById("meu P").outerHTML = "
Este H1 substituiu um parágrafo.
"
roteiro>
corpo>
html>

No seu navegador, você deve ver algo assim:

Neste exemplo, a propriedade outerHTML altera o p elemento em um h1 elemento.

Saiba a diferença e quando usar essas propriedades

As propriedades DOM innerHTML e outerHTML têm muitas semelhanças, mas uma diferença fundamental. A propriedade innerHTML captura o conteúdo HTML de um elemento. Em contraste, a propriedade outerHTML captura o HTML que representa o próprio elemento e seu conteúdo.

Você pode usar essas propriedades para ler e gravar conteúdo HTML por meio do DOM. O DOM será um conceito comum e importante em todo o processo de desenvolvimento do JavaScript.