Como obter e definir o conteúdo de texto de um elemento usando JavaScript

Introdução

"Quando se trabalha com JavaScript, é comum precisarmos obter e modificar o conteúdo de texto de um elemento HTML. Neste artigo, exploraremos algumas técnicas para realizar essa tarefa de forma eficiente e prática. Aprenderemos como obter o conteúdo de texto de um elemento e também como definir um novo conteúdo usando JavaScript."

Obtendo o conteúdo de texto

Toda vez que queremos extrair o conteúdo de texto de um elemento específico em JavaScript, podemos usar a propriedade textContent. Essa propriedade retorna o texto contido dentro do elemento, sem incluir as tags HTML circundantes. Veja o exemplo abaixo para entender como utilizá-la:

Código:

var elemento = document.getElementById('meuElemento');
var conteudo = elemento.textContent;

Definindo o conteúdo de texto

Para definir o conteúdo de texto de um elemento usando JavaScript, podemos simplesmente atribuir um novo valor à propriedade textContent. Isso substituirá o conteúdo de texto existente pelo novo texto fornecido. Veja o exemplo a seguir:

Código:

var elemento = document.getElementById('meuElemento');
elemento.textContent = 'Novo conteúdo de texto';

Considerações finais

Com o uso das propriedades textContent, obter e definir o conteúdo de texto de um elemento em JavaScript se torna uma tarefa simples e direta. Lembre-se de que o textContent retorna apenas o texto puro, sem formatação ou elementos HTML aninhados. Experimente essas técnicas em seus projetos e aproveite a flexibilidade que o JavaScript oferece para manipular o conteúdo da sua página da web.