HTML interno JavaScript – Acervo Lima Tutorials

Resumo : neste tutorial, você aprenderá como usar a innerHTMLpropriedade JavaScript de um elemento para obter ou definir uma marcação HTML contida no elemento.

The innerHTMLé uma propriedade Elementque permite obter ou definir a marcação HTML contida no elemento:

element.innerHTML = 'new content';
element.innerHTML;Linguagem de código:  JavaScript  ( javascript )

Lendo a propriedade innerHTML de um elemento

Para obter a marcação HTML contida em um elemento, use a seguinte sintaxe:

let content = element.innerHTML;Linguagem de código:  JavaScript  ( javascript )

Quando você lê o texto innerHTMLde um elemento, o navegador da web precisa serializar o fragmento HTML dos descendentes do elemento.

1) Exemplo simples de JavaScript innerHTML

Suponha que você tenha a seguinte marcação:

 <ul id="menu">
    <li>Home</li>
    <li>Services</li>
</ul>Linguagem de código:  HTML, XML  ( xml )

O exemplo a seguir usa a innerHTMLpropriedade para obter o conteúdo do <ul>elemento:

let menu = document.getElementById('menu');
console.log(menu.innerHTML);Linguagem de código:  JavaScript  ( javascript )

Como funciona:

Primeiro, selecione o <ul>elemento pelo seu id ( menu) usando o getElementById()método.
Em seguida, obtenha o conteúdo HTML do <ul>elemento usando o arquivo innerHTML.

Saída:

<li>Home</li>
<li>Services</li>Linguagem de código:  HTML, XML  ( xml )

2) Examinando a fonte HTML atual

A innerHTMLpropriedade retorna a fonte HTML atual do documento, incluindo todas as alterações feitas desde o carregamento da página.

Veja o exemplo a seguir:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript innerHTML</title>
</head>
<body>
    <ul id="menu">
        <li>Home</li>
        <li>Services</li>
    </ul>
    <script>
        let menu = document.getElementById('menu');

        // create new li element
        let li = document.createElement('li');
        li.textContent = 'About Us';
        // add it to the ul element
        menu.appendChild(li);

        console.log(menu.innerHTML);
    </script>
</body>
</html>Linguagem de código:  HTML, XML  ( xml )

Saída:

<li>Home</li>
<li>Services</li>
<li>About Us</li>Linguagem de código:  HTML, XML  ( xml )

Como funciona.

Primeiro, obtenha o <ul>elemento com o id menuusando o getElementById()método.
Segundo, crie um novo <li>elemento e adicione-o ao elemento <ul> usando os métodos createElement()e appendChild().
Terceiro, obtenha o HTML do <ul>elemento usando a propriedade innerHTML do elemento <ul>. O conteúdo do elemento <ul> inclui o conteúdo inicial e o conteúdo dinâmico criado dinamicamente por JavaScript.

Configurando a propriedade innerHTML de um elemento

Para definir o valor da innerHTMLpropriedade, você usa esta sintaxe:

element.innerHTML = newHTML;

A configuração substituirá o conteúdo existente de um elemento pelo novo conteúdo.

Por exemplo, você pode remover todo o conteúdo do documento limpando o conteúdo do document.bodyelemento:

document.body.innerHTML = '';Linguagem de código:  JavaScript  ( javascript )

⚠️ Risco de segurança

HTML5 especifica que uma tag <script> inserida com innerHTML não deve ser executada.

Suponha que você tenha o seguinte index.htmldocumento:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS innerHTML example</title>
    </head>

    <body>
        <div id="main"></div>
        <script src="app.js"></script>
    </body>

</html>Linguagem de código:  HTML, XML  ( xml )

E o app.jsarquivo fica assim:

const scriptHTML = `<script>alert("Alert from innerHTML");</script>`;
const main = document.getElementById('main');

main.innerHTML = scriptHTML;Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, o alert()interior da <script>tag não será executado.

No entanto, se você alterar o código-fonte app.jspara o seguinte:

const main = document.getElementById('main');

const externalHTML = `<img src='1' onerror='alert("Error loading image")'>`;
// shows the alert
main.innerHTML = externalHTML;Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, a imagem com src 1 não será carregada com sucesso. Portanto, será executado o erro on que executa o alert() .

Em vez de ter um simples alerta(), os hackers podem incluir código malicioso, os usuários que abrirem a página ficarão vulneráveis.

Portanto, você não deve definir conteúdos sobre os quais não tem controle innerHTMLou enfrentará um risco potencial de segurança.

Se quiser inserir texto simples no documento, você pode usar a textContentpropriedade em vez do innerHTML. O textContentnão será analisado como HTML, mas como texto bruto.

Resumo

Use innerHTMLa propriedade de um elemento para obter ou definir o HTML contido no elemento.
A innerHTMLpropriedade retorna a fonte HTML atual do elemento, incluindo qualquer alteração feita desde o carregamento da página.
Não use innerHTMLpara definir novos conteúdos que você não tem controle para evitar riscos de segurança.

Texto JavaScriptConteúdo

JavaScript innerHTML versus createElement