Languages
[Edit]
PT

JavaScript - qual é a diferença entre HTML interno (innerHTML) e HTML externo (outerHTML?)

3 points
Created by:
Alyona
1140

1. Visão geral

O termo HTML externo em JavaScript descreve o código-fonte html que está dentro de algum elemento (HTML interno) delimitado pelo código de tag do elemento com todos os atributos.

A diferen├ža entre o HTML interno e o HTML externo:

  • HTML interno (innerHTML) =┬áHTML dentro do elemento selecionado;
  • HTML externo (outerHTML) =┬áHTML dentro do elemento selecionado + HTML do elemento selecionado.

Vamos dar uma olhada no exemplo abaixo.

Exemplo de HTML

<div id="element">
  <p>Hello world</p>
</div>

HTLM interno (innerHTML)

<p>Hello world</p>

HTLM externo (outerHTML)

<div id="element">
  <p>Hello world</p>
</div>

Outra maneira de ver isso ├ę com a descri├ž├úo abaixo + imagem

  • innerHTML =┬áConte├║do da tag fechada
  • outerHTML = Tag de abertura + Conte├║do da tag fechada┬á+ Fechamento da┬átag
HTML tag construction
Constru├ž├úo de tags HTML

Agora, podemos testá-lo sozinhos com 2 exemplos práticos de código.

2. Exemplo de código 1

// ONLINE-RUNNER:browser;

<html>
<body>
  <div id="element">
    <p>Hello world</p>
  </div>
  <script>

    var element = document.getElementById('element');

    console.log('innerHTML:');
    console.log(element.innerHTML);

    console.log('outerHTML:');
    console.log(element.outerHTML);

  </script>
</body>
</html>

3. Exemplo de código 2

// ONLINE-RUNNER:browser;

<html>
<body>
  <div id="element">
    <h3>Head 1</h3>
    <p>Some apostrophe text...</p>
    <h3>Head 2</h3>
    <p>Some apostrophe text...</p>
  </div>
  <script>

    var element = document.getElementById('element');

    console.log('innerHTML:');
    console.log(element.innerHTML);

    console.log('outerHTML:');
    console.log(element.outerHTML);

  </script>
</body>
</html>

Perguntas mescladas:

  1. JavaScript -  interno (inner) vs externo (outer) html
  2. JavaScript - HTML interno (innerHTML) vs HTML externo (outerHTML)
  3. JavaScript - como usar HTML interno (innerHTML) e HTML externo (outerHTML)?
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join