Início /Programação /JavaScript /4 maneiras de adicionar texto ao final de um elemento HTML usando JavaScript

4 maneiras de adicionar texto ao final de um elemento HTML usando JavaScript

Por: Angelo Luis Ferreira | 14/03/2023 Acessos: 3.717

Neste tutorial mostraremos 4 maneiras distintas para adicionar um texto (string) no final do conteúdo de um elemento HTML com JavaScript:

1. Utilizando a propriedade innerHTML

2. Utilizando a propriedade textContent

3. Adicionando o texto diretamente pelo método insertAdjacentHTML()

4. Adicionando o texto diretamente pelo método append()

Observações:

a. Elementos HTML são os tags que estão inseridas em um arquivo HTML.

b. Ao utilizarmos as propriedade JavaScript innerHTML ou textContent, precisamos primeiro acessar o conteúdo do elemento HTML existente e depois substituí-lo pelo novo conteúdo com o texto adicionado.

Obs.: Para saber ou escolher a melhor forma para acessar o o conteúdo do elemento HTML, leia: Manipulando o DOM: como selecionar elementos HTML usando JavaScript

c. Ao utilizarmos o método insertAdjacentHTML() ou append() simplesmente adicionamos o novo texto no final do conteúdo HTML existente, sem precisar substituí-lo. Isto irá otimizar o nosso código de programação, deixando-o mais eficiente para executar a tarefa de maneira rápida e sem consumir muitos recursos de hardware.

1. Utilizando a propriedade innerHTML

1.1. A propriedade innerHTML retorna ou substitui o conteúdo HTML de um elemento HTML.

1.2. Propriedade innerHTML - Sintaxe:

a. retorna o conteúdo HTML de um elemento existente.

element.innerHTML

b. substitui o conteúdo HTML de um elemento existente.

element.innerHTML = "texto HTML"

1.3. Exemplos de utilização:

1.3.1. Obtendo o conteúdo HTML de um elemento existente.

const elemento = document.getElementById("idElemento").innerHTML

1.3.2. Substituindo o conteúdo HTML de um elemento existente.

document.getElementById("idElemento").innerHTML = "texto HTML"

1.3.3. Substituindo o conteúdo HTML de um elemento existente pelo conteúdo acrescido de um novo texto HTML no final.

document.getElementById("idElemento").innerHTML += "texto HTML"

Obs.: O operador composto de atribuição += soma ou concatena um valor à uma variável existente. Ele deve ser usado para concatenar o novo texto ao final do conteúdo atual da variável e, em seguida, armazenar o resultado na mesma variável original.

1.4. Exemplo prático:

1.4.1. Como exemplo prático, vamos criar um campo input para digitar os textos que deverão ser exibidos na tela, no final do conteúdo de elemento HTML, quando clicamos em um botão:

HTML

<h2>Acrescentando textos</h2>
<input id="texto" type="text" placeholder="Digite um texto" />
<button onclick="adicionarTexto()">Clique aqui</button>
<br>
<p id="elemento">Texto aqui: </p>

JavaScript

function adicionarTexto() {  
  const texto = document.getElementById("texto").value;
  document.getElementById("elemento").innerHTML += texto+" ";   
}

Veja o resultado do exemplo no Squids Editor: Abrir Squids Editor (288).

1.4.2. Veja a imagem do resultado:

1.4.3. Explicando o código JavaScript:

a. Pegamos o valor da propriedade value do elemento HTML input, cujo o seletor id = "texto" e armazenamos na variável texto.

a.1. Para selecionar o elemento input, podemos utilizar os métodos document.getElementById() ou document.querySelector(). Para saber mais como obter o valor de propriedade value de um elemento input, leia Como alterar valor de input de um formulário HTML com JavaScript.

b. Selecionamos o elemento que desejamos adicionar o texto. No exemplo, selecionamos o parágrafo p identificado pelo seletor id = "elemento".

b.1. Para selecionar o elemento, também podemos utilizar os métodos document.getElementById() ou document.querySelector().

c. Acessamos o conteúdo HTML, utilizando a propriedade innerHTML do elemento com o seletor id = "elemento".

d. Finalmente, adicionamos o texto ao final do conteúdo atual do elemento. Para isso, você pode usar o operador += para concatenar o texto ao final do conteúdo atual.

Observação: O texto adicionado será o valor digitado concatenado com um espaço vazio " ". Isto foi colocado apenas para identificar os textos digitados, pois deverão estar separados por um espaço vazio.

2. Utilizando a propriedade textContent

2.1. A propriedade textContent retorna ou substitui o conteúdo de texto de um elemento e todos os seus elementos filhos.

2.2. Propriedade textContent - Sintaxe:

a. retorna o conteúdo de texto de um elemento existente

element.textContent

b. substitui o conteúdo de texto de um elemento existente

element.textContent = texto string

2.3. Exemplos de utilização:

2.3.1. Obtendo o conteúdo de texto de um elemento existente

const elemento = document.getElementById("idElemento").textContent

2.3.2. Substituindo o conteúdo de texto de um elemento existente

document.getElementById("idElemento").textContent = "string"

2.3.3. Substituindo o conteúdo de texto de um elemento existente pelo conteúdo acrescido de um texto no final.

document.getElementById("idElemento").textContent += "string"

2.4. Exemplo prático:

2.4.1. Adicionar um texto no final do conteúdo de texto de um elemento HTML existente, quando clicamos em um botão.

HTML

<h2>Acrescentando textos</h2>
<input id="texto" type="text" placeholder="Digite um texto" />
<button onclick="adicionarTexto()">Clique aqui</button>
<br>
<p id="elemento">Texto aqui: </p>

JavaScript

function adicionarTexto() {  
  const texto = document.getElementById("texto").value;
  document.getElementById("elemento").textContent += texto+" ";   
}

Veja o resultado do exemplo no Squids Editor: Abrir Squids Editor (289).

2.4.2. Veja a imagem do resultado:

2.5. Diferença entre innerHTML, textContent e innerText:

2.5.1. A propriedade innerHTML retorna: O conteúdo de texto do elemento, incluindo todo o espaçamento e tags HTML internas. Permite espaçamentos extras.

2.5.2. A propriedade textContent retorna: O conteúdo de texto do elemento e todos os descendentes, com todo o espaçamento e texto CSS oculto, mas sem tags. Permite espaçamentos extras.

2.5.2.1. A propriedade textContent possui melhor performance que innerHTML, pois seus valores não são analisados como HTML.

2.5.3. A propriedade textText retorna: O conteúdo de texto do elemento e todos os descendentes, com espaçamento limitado e texto CSS oculto, mas sem tags. Não permite espaçamento extras.

2.5.3.1. A utilização da propriedade textText não é recomendada para esta função, pois remove os nós filhos do elemento e, destroi permanentemente todos os nós de texto descendentes. Isso torna impossível inserir novamente os nós em qualquer outro elemento ou no mesmo elemento.

3. Adicionando um texto diretamente pelo método insertAdjacentHTML()

3.1. O método insertAdjacentHTML() insere o código HTML em uma posição específica do conteúdo de um elemento HTML existente.

3.2. Método insertAdjacentHTML() - Sintaxe:

element.insertAdjacentHTML(position, texto HTML)

3.2.1. Onde:

position é a posição onde se deseja inserir o texto HTML no conteúdo existente. O valor de position deve ficar entre aspas. Obrigatório.

valor	descrição
afterbegin	Após o início do elemento (primeiro filho)
afterend	Após o elemento
beforebegin	Antes do elemento
beforeend	Antes do fim do elemento (último filho)

texto HTML é o texto HTML que se deseja adicionar. Obrigatório.

3.3. Exemplos de utilização:

3.3.1. Adicionando texto final do conteúdo de um elemento HTML.

document.getElementById("yourId"). insertAdjacentHTML("beforeend", "Texto HTML Qualquer")

3.4. Exemplo prático:

3.4.1. Como exemplo prático, vamos criar um campo input para digitar os textos que deverão ser exibidos no final do conteúdo de um elemento HTML existente, ao clicarmos em um botão.

HTML

<h2>Acrescentando textos</h2>
<input id="nome" type="text" placeholder="Digite um texto" />
<button onclick="adicionarNome()">Clique aqui</button>
<br>
<p id="elemento">Texto aqui: </p>

JavaScript

function adicionarNome() {  
  let nome = document.querySelector("#nome").value;
  document.getElementById("elemento").insertAdjacentHTML("beforeend", nome+" ");   
}

Veja o resultado do exemplo no Squids Editor: Abrir Squids Editor (290).

3.4.2. Veja o resultado:

3.4.3. Explicando o código JavaScript:

a. Pegamos o valor da propriedade value do elemento HTML input, cujo o seletor id = "texto" e armazenamos na variável texto.

b. Selecionamos o elemento que desejamos adicionar o texto. No exemplo, selecionamos o parágrafo p identificado pelo seletor id = "elemento".

b.1. Para selecionar o elemento, também podemos utilizar os métodos document.getElementById() ou document.querySelector().

c. Por intermédio do método insertAdjacentHTML(), inserimos o novo texto diretamente no final do conteúdo do elemento HTML existente;

c.1. Usamos o parâmetro "beforeend" para indicar a posição onde deve ser inserido o novo texto, sendo antes do final do último elemento.

4. Adicionando um texto diretamente pelo método append()

4.1. O método append() O método insere o conteúdo de texto após o último filho do elemento HTML existente.

4.1. Método append() - Sintaxe:

element.append("string", elemento);

4.1.1. Onde:

string é o o texto que se deseja adicionar no final do conteúdo do elemento HTML existente. Obrigatório.

elemento é quando se deseja adicionar um novo elemento HTML ao elemento existente. Opcional.

4.2. Exemplos de utilização:

4.2.1. Adicionando texto .

document.getElementById("yourId").append("Texto Qualquer")

4.2.2. Criando um elemento HTML com texto

Obs.: createElement() cria um novo elemento HTML. No exemplo abaixo criamos o elemento parágrafo (p). Isto é utilizado para criar um novo elemento HTML.

let p = document.createElement("p");
document.getElementById("yourId").append("Texto Qualquer", p)

4.3. Exemplo prático:

4.3.1. Como exemplo prático, vamos criar um campo input para digitar os textos que deverão ser exibidos no final do conteúdo de um elemento HTML existente, ao clicarmos em um botão.

HTML

<h2>Acrescentando textos</h2>
<input id="nome" type="text" placeholder="Digite um texto" />
<button onclick="adicionarNome()">Clique aqui</button>
<br>
<p id="elemento">Texto aqui: </p>

JavaScript

function adicionarNome() {  
  let nome = document.querySelector("#nome").value;
  document.getElementById("elemento").append(nome+" ");   
}

Veja o resultado do exemplo no Squids Editor: Abrir Squids Editor (287).

4.3.2. Veja a imagem do resultado:

4.4.3. Explicando o código JavaScript:

a. Pegamos o valor da propriedade value do elemento HTML input, cujo o seletor id = "texto" e armazenamos na variável texto.

b. Selecionamos o elemento que desejamos adicionar o texto. No exemplo, selecionamos o parágrafo p identificado pelo seletor id = "elemento".

b.1. Para selecionar o elemento, também podemos utilizar os métodos document.getElementById() ou document.querySelector().

c. Por intermédio do método append() inserimos o novo texto diretamente no final do conteúdo do elemento HTML existente;

REFERÊNCIA JAVASCRIPT

1. [element.innerHTML] >> Sintaxe e exemplos - MDN Web Docs.

2. [element.textContent] >> Sintaxe e exemplos - MDN Web Docs.

3. [element.append()] >> Sintaxe e exemplos - MDN Web Docs.

4. [element.insertAdjacentHTML()] >> Sintaxe e exemplos - MDN Web Docs.

5. [element.innerText] >> Sintaxe e exemplos - MDN Web Docs.

4 maneiras de adicionar texto ao final de um elemento HTML usando JavaScript

1. Utilizando a propriedade innerHTML

2. Utilizando a propriedade textContent

3. Adicionando um texto diretamente pelo método insertAdjacentHTML()

4. Adicionando um texto diretamente pelo método append()

REFERÊNCIA JAVASCRIPT

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários

4 maneiras de adicionar texto ao final de um elemento HTML usando JavaScript

1. Utilizando a propriedade innerHTML

2. Utilizando a propriedade textContent

3. Adicionando um texto diretamente pelo método insertAdjacentHTML()

4. Adicionando um texto diretamente pelo método append()

REFERÊNCIA JAVASCRIPT

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários

Infomações do site / SEO