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