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"

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.

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.

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.

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. 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.

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.

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.

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. Por intermédio do método append() inserimos o novo texto diretamente no final do conteúdo do elemento HTML existente;

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.

Dica para aprender mais

DICA: Aprenda a ser um programador mais do que completo (Pacote Full Stack)

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.

O anúncio abaixo ajuda manter o Portal Visual Dicas

 COMENTÁRIOS