Como adicionar conteúdo em um elemento HTML existente com JavaScript

Por: Angelo Luis Ferreira | 24/08/2017 Acessos: 43.376

HTML

1. Vamos criar primeiro o conteúdo original do nosso exemplo, onde teremos uma lista e um  parágrafo HTML.

<h2>Receita de bolo caseiro</h2>
<h3>Ingredientes</h3>
<br>
<ul id="lista">
  <li>Farinha de trigo</li>
  <li>Fermento</li>
  <li>leite</li>
  <li>Ovos</li>
</ul>

<h3>Modo de preparo</h3>
<p>Misture o leite, farinha e os ovos.</p>

 Veja como ficam nossos elementos HTML:

2. Agora, vamos acrescentar os campos do "input" e "textarea" e os botões tipo <button> para o usuário inserir os valores digitados.

<h2>Receita de bolo caseiro</h2>
<h3>Ingredientes</h3>
<input type="text" id="ingrediente" />
<button onclick="adicionar()">Adicionar ingredientes</button>
<br>
<ul id="lista">
  <li>Farinha de trigo</li>
  <li>Fermento</li>
  <li>leite</li>
  <li>Ovos</li>
</ul>

<h3>Modo de preparo</h3>
<textarea type="text" id="preparo" rows="6" cols="50"></textarea>
<br>
<button onclick="preparar()">Complementar preparo</button>
<p id="paragrafo">Misture o leite, farinha e os ovos.</p>

 Observe que:

• Acrescentamos os botões <button> e os campos <input> e <textarea>;
• Utilizamos o evento "onclick" para disparar as funções quando o usuário clicar no botão;
• Acrescentamos as funções: adicionar() e preparar();
• Acrescentamos os id's: ingrediente, lista, preparo e paragrafo.

Veja como ficam nossos elementos agora:

3. Observe que os botões adicionados ainda estão sem efeito. Para isto, precisaremos definir o código JavaScript para as funções adicionar() e preparar().

JavaScript

a. Vamos criar o código JavaScript para a função adicionar():

function adicionar() {
  var ing = document.getElementById("ingrediente").value;
  var lista  = document.getElementById("lista").innerHTML;
  lista = lista +"<li>"+ing+"</li>";
  
  document.getElementById("lista").innerHTML = lista;
}

Explicando o código:

• Através do objeto document.getElement.ById() Pegamos o valor digitado em "input" (ingrediente) e colocamos na variável ing;
• Pegamos o conteúdo do elemento HTML <ul id="lista"> (lista) e colocamos na variável lista;
• Adicionamos na variável lista o conteúdo digitado que foi armazenado na variável ing. 
• Definimos que o conteúdo HTML será igual ao conteúdo armazenado na variável lista.

b. Vamos criar agora o código JavaScript para a função preparar(): 

function preparar() {
  var prep = document.getElementById("preparo").value;
  var paragrafo  = document.getElementById("paragrafo").innerHTML;
  paragrafo = paragrafo +"<p>"+prep+"</p>";
  
  document.getElementById("paragrafo").innerHTML = paragrafo;
}

Explicando o código:

• Pegamos o valor digitado em "textarea" (preparo) e colocamos na variável prep;
• Pegamos o conteúdo do elemento HTML <p id="paragrafo"> (parágrafo) e colocamos na variável paragrafo;
• Adicionamos na variável paragrafo o conteúdo digitado que foi armazenado na variável prep. 
• Definimos que o conteúdo HTML será igual ao novo conteúdo armazenado na variável paragrafo.

  DICA: Utilize esse método JavaScript para adicionar conteúdo em qualquer elemento HTML.

RESULTADO FINAL

Veja agora o nosso exemplo finalizado. Observe que os botões <input> acrescentados funcionam agora, acrescentando conteúdo para a lista e parágrafo HTML.

See the Pen QMBdWR by Angelo Luis Ferreira (@angeloalf) on CodePen

TENTE VOCÊ MESMO

Veja no nosso editor HTML como foi realizado o método JavaScript. No editor, altere os códigos da forma que você desejar. Depois é só copiar os códigos e colar no seu projeto. Clique no link abaixo para abrir nosso editor de testes. (Não esqueça de clicar no botão "Executar" para visualizar os resultados).

Tente você mesmo »  

CÓDIGO COMPLETO DO EXEMPLO

Para copiar e colar nos seus projetos.

HTML

<h2>Receita de bolo caseiro</h2>
<h3>Ingredientes</h3>
<input type="text" id="ingrediente" />
<button onclick="adicionar()">Adicionar ingredientes</button>
<br>
<ul id="lista">
  <li>Farinha de trigo</li>
  <li>Fermento</li>
  <li>leite</li>
  <li>Ovos</li>
</ul>

<h3>Modo de preparo</h3>
<textarea type="text" id="preparo" rows="6" cols="50"></textarea>
<br>
<button onclick="preparar()">Complementar preparo</button>
<p id="paragrafo">Misture o leite, farinha e os ovos.</p>

JavaScript

 function adicionar() {
  var ing = document.getElementById("ingrediente").value;
  var lista  = document.getElementById("lista").innerHTML;
  lista = lista +"<li>"+ing+"</li>";
  
  document.getElementById("lista").innerHTML = lista;
}

function preparar() {
  var prep = document.getElementById("preparo").value;
  var paragrafo  = document.getElementById("paragrafo").innerHTML;
  paragrafo = paragrafo +"<p>"+prep+"</p>";
  
  document.getElementById("paragrafo").innerHTML = paragrafo;
}

REFERÊNCIA JAVASCRIPT

1. [document.getElementById()] >> Sintaxe e exemplos