Neste tutorial, vamos mostrar como adicionar conteúdo em um elemento HTML utilizando JavaScript. No exemplo, mostraremos como acrescentar itens em uma lista e parágrafos em um texto HTML.

Observação: Utilizando a metodologia destes exemplos, você poderá acrescentar conteúdo em qualquer elemento HTML.

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:


Receita de bolo caseiro

Ingredientes

  • Farinha de trigo
  • Fermento
  • leite
  • Ovos

Modo de preparo

Misture o leite, farinha e os ovos.


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:


Receita de bolo caseiro

Ingredientes


  • Farinha de trigo
  • Fermento
  • leite
  • Ovos

Modo de preparo


Misture o leite, farinha e os ovos.


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

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

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

2. 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;
}

 

COMENTÁRIOS

Blog Visual Dicas

Visual Dicas - A sua fonte de informação!

Controle o seu mundo com pro Conheça o nosso blog Visual Dicas, onde apresentamos dicas de Informática, Internet, Blogs, Software, Hardware, Tecnologia, Gestão Empresarial, RH, Treinamento e Cursos Online.

Visual Dicas

Squids Arduino

Controle o seu mundo com projetos e ideias para automação, robótica e dispositivos inteligentes. Venha conhecer e compartilhar experiências em projetos na plataforma Arduino.

Squids Arduino

Blogolista.com

O Blogolista.com é um site para a divulgação, promoção e publicidade de blogs. Aqui no Blogolista você encontrará os melhores Links e Blogs da atualidade.

Blogolista.com

JSN Epic template designed by JoomlaShine.com