Pesquisa de site

A diferença entre HTML interno e externo


Essas duas propriedades são bastante descritivas, uma vez que você entenda seu contexto.

As propriedades innerHTML e outerHTML DOM permitem ler e escrever 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 maneira bem diferente. Descubra como usar essas duas propriedades com exemplos práticos.

O que é HTML interno?

A propriedade innerHTML faz parte do DOM e você pode acessá-la via JavaScript. Você pode usá-lo para obter ou definir o conteúdo de um elemento. Este conteúdo exclui a tag própria 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>
<body>
    <p id="myP">I am a paragraph.</p>
    <script>
    document.getElementById("myP").innerHTML = "Hello World";
    </script>
</body>
</html>

No 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 do elemento

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>
<body>
    <p id="myP">I am a paragraph.</p>
    <script>
    document.getElementById("myP").outerHTML = "<h1>This H1 replaced a paragraph.</h1>"
    </script>
</body>
</html>

No seu navegador, você deverá ver algo assim:

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

Conheça 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. Por outro lado, a propriedade outerHTML captura o HTML que representa o próprio elemento e seu conteúdo.

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

Artigos relacionados: