Alterando o conteúdo de um elemento HTML com `innerHTML` e `textContent`

Como alterar o conteúdo de um elemento HTML (innerHTML, textContent)?

Em JavaScript, um dos aspectos mais comuns da manipulação do DOM é a alteração do conteúdo de elementos HTML. As duas maneiras mais comuns de fazer isso são através das propriedades innerHTML e textContent. Embora ambos sirvam para modificar o conteúdo de elementos, eles têm diferenças importantes no comportamento e nos casos de uso. Vamos entender melhor como cada um funciona e quando usá-los.

innerHTML: Alterando o conteúdo HTML de um elemento

A propriedade innerHTML é uma maneira prática de acessar e modificar o conteúdo HTML de um elemento. Quando você usa innerHTML, pode obter ou definir o conteúdo HTML de um elemento, o que significa que você pode alterar não apenas o texto, mas também a estrutura HTML do elemento.

Exemplo de código com innerHTML:

let elemento = document.getElementById('meuElemento');
console.log(elemento.innerHTML);  // Exibe o conteúdo HTML do elemento

// Alterando o conteúdo HTML do elemento
elemento.innerHTML = '<strong>Texto alterado!</strong>';
console.log(elemento.innerHTML);  // Exibe o novo conteúdo HTML

Neste exemplo, innerHTML é usado para acessar e modificar o conteúdo de um elemento HTML. Você pode definir novos elementos HTML, como uma tag <strong>, dentro do conteúdo do elemento.

Características do innerHTML

• Modifica o conteúdo HTML completo: Pode alterar tanto o texto quanto as tags HTML internas de um elemento.
• Permite inserção de HTML: Você pode adicionar tags HTML, como <div>, <span>, ou até mesmo <script>, o que torna innerHTML muito flexível.
• Segurança: Se você estiver manipulando dados inseridos por usuários, tome cuidado ao usar innerHTML, pois isso pode abrir brechas para ataques de injeção de código (XSS), permitindo que scripts maliciosos sejam executados.

textContent: Alterando apenas o texto de um elemento

A propriedade textContent, por outro lado, permite que você altere apenas o texto de um elemento, sem afetar sua estrutura HTML. Quando você usa textContent, qualquer conteúdo HTML dentro do elemento é tratado como texto simples e não será interpretado como HTML.

Exemplo de código com textContent:

let elemento = document.getElementById('meuElemento');
console.log(elemento.textContent);  // Exibe o conteúdo de texto do elemento

// Alterando apenas o texto do elemento
elemento.textContent = 'Texto alterado!';
console.log(elemento.textContent);  // Exibe o novo conteúdo de texto

Neste exemplo, textContent é usado para modificar o texto de um elemento, sem afetar o HTML ou inserir tags HTML no conteúdo.

Características do textContent

• Modifica apenas o texto: Apenas o texto do elemento é alterado, mantendo qualquer estrutura HTML interna intacta.
• Não permite inserção de HTML: Qualquer HTML presente no conteúdo do elemento é tratado como texto, e não como tags HTML.
• Mais seguro: Como não permite a inserção de HTML, textContent é considerado mais seguro em termos de prevenção contra injeção de código.

Comparando innerHTML e textContent

Quando usar innerHTML ou textContent?

• Use innerHTML quando você precisar alterar o conteúdo HTML de um elemento, incluindo a adição de novas tags, como <div>, <span>, ou até <a>. Porém, tome cuidado ao usar innerHTML com dados de usuário para evitar problemas de segurança.
• Use textContent quando você deseja modificar apenas o texto de um elemento, sem afetar sua estrutura HTML. Esse método é mais seguro e rápido, sendo ideal para alterar o conteúdo textual de elementos sem riscos de injeção de código.

Exemplo prático: Comparando os dois métodos

Vamos ver um exemplo de quando usar cada um dos métodos para modificar o conteúdo de um elemento.

let elemento = document.getElementById('meuElemento');

// Usando innerHTML para inserir HTML
elemento.innerHTML = '<strong>Texto com <em>HTML</em>!</strong>';
console.log(elemento.innerHTML);

// Usando textContent para inserir apenas texto
elemento.textContent = 'Texto sem HTML';
console.log(elemento.textContent);

Neste exemplo, o innerHTML é utilizado para adicionar tags HTML dentro do conteúdo, enquanto textContent apenas altera o texto, sem permitir HTML.

Conclusão

Escolher entre innerHTML e textContent depende do que você está tentando fazer. Se você precisa de flexibilidade para inserir HTML junto com texto, use innerHTML, mas tome precauções com dados dinâmicos para evitar problemas de segurança. Se você precisa alterar apenas o texto de um elemento, textContent é a escolha mais segura e eficiente. Compreender essas diferenças vai ajudá-lo a tomar decisões mais informadas e seguras ao manipular o conteúdo de suas páginas web.

Quando usar innerHTML e textContent para manipulação do conteúdo HTML

Alterar o conteúdo de elementos HTML é uma das operações mais comuns ao trabalhar com o DOM. O uso correto de innerHTML e textContent pode impactar diretamente o desempenho e a segurança do seu código. innerHTML é extremamente útil para inserções de HTML dinâmico, mas deve ser usado com cautela para evitar vulnerabilidades, enquanto textContent é uma opção mais segura e eficiente quando você só precisa modificar texto. Saber quando usar cada um desses métodos torna seu código mais limpo e seguro, além de evitar surpresas no comportamento da página.

Algumas aplicações:

• Alterar dinamicamente o conteúdo de elementos em páginas interativas, como mudar o texto de um título ou parágrafo.
• Adicionar novas tags HTML em tempo real para atualizar a estrutura de uma página sem recarregá-la.
• Manipular dados exibidos na página, como resultados de pesquisas, filtros de listas, ou exibição de formulários.
• Modificação de textos em formulários ou caixas de mensagens sem afetar a estrutura da página.

Dicas para quem está começando

• Use textContent se você só precisa alterar o texto de um elemento. Ele é mais seguro e mais rápido para esse tipo de tarefa.
• Se precisar alterar ou inserir HTML dentro de um elemento, innerHTML é a escolha, mas tenha cuidado com o conteúdo dinâmico para evitar vulnerabilidades.
• Ao usar innerHTML, evite inserir conteúdo não confiável, como entradas de usuários, para prevenir ataques XSS.
• Experimente ambos os métodos em diferentes cenários para entender melhor como cada um afeta o conteúdo da página.

Contribuições de

Andressa Maria

Desenvolvedora sênior com forte atuação em PHP, JavaScript e tecnologias de backend.

Mais sobre o autor

Compartilhe este tutorial