Você está aqui: JavaScript ::: W3C DOM - (Wide Web Consortium) Document Object Model ::: Criação, modificação e exclusão de elementos

Como criar novos elementos HTML usando o método createElement()

Quantidade de visualizações: 2809 vezes
Em algumas situações nós precisamos criar um novo elemento HTML dinamicamente, ou seja, depois que a página web já carregou. Para isso podemos usar o método document.createElement(). Ele cria o elemento cujo nome de tag fornecemos como uma string.

Veja um exemplo completo:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<html>
<head>
  <title>DOM da W3C</title>
</head>

<body>

<a href="javascript:criar_botao()">Criar um botão</a>

<script type="text/javascript">
  function criar_botao(){
    // vamos criar o botão dinamicamente
    var btn = document.createElement("button");
    // vamos definir o seu texto
    btn.innerHTML = "Clique aqui";
    // vamos adicionar o botão como último elemento do documento HTML
    document.body.appendChild(btn);
  }
</script>

</body>

</html>

Coloque este código em um documento HTML e abra-o em seu navegador web. Clique no link e veja um novo botão ser criado e exibido. Clique mais vezes e veja novos botões. No entanto, os botões não reagem ao clique. Não se preocupe. Em outras dicas no nosso site você aprenderá como adicionar eventos aos seus elementos HTML, mesmo em tempo de execução.

Link para compartilhar na Internet ou com seus amigos:

JavaScript ::: Dicas & Truques ::: Matemática e Estatística

Como arredondar um valor numérico de ponto-flutuante para cima usando a função ceil() do objeto Math do JavaScript

Quantidade de visualizações: 14347 vezes
A função ceil() do objeto Math do JavaScript nos permite arrendondar um valor float ou double para o próximo inteiro maior. Dessa forma, um valor 1.45 será convertido para 2. Veja o código completo para o exemplo:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<html>
<head>
<title>Estudando JavaScript</title>
</head>
<body>

<script type="text/javascript">
  var valor = 2.85;
  document.write("O resultado do arredondamento de " +
    valor + " é " + Math.ceil(valor));
</script>
 
</body>
</html>

Ao executarmos este código nós teremos o seguinte resultado:

O resultado do arredondamento de 2.85 é 3


JavaScript ::: Dicas & Truques ::: Data e Hora

Como adicionar horas a um objeto Date em JavaScript - Datas e horas em JavaScript

Quantidade de visualizações: 8591 vezes
Nesta dica mostrarei como é possível adicionar horas a um objeto Date da linguagem JavaScript. Note que criei uma função personalizada para este propósito, e ela retorna um novo objeto Date com a nova data e hora já construída.

Veja o código completo para o exemplo:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<html>
<head>
<title>Estudando JavaScript</title>
</head>
<body>
 
<script type="text/javascript">
  function adicionarHoras(data, horas){
    return new Date(data.getTime() + (horas * 
      60 * 60 * 1000));
  }
 
  document.write('Agora são: ' + 
    (new Date()).toLocaleString() + '<br>');
  document.write('Daqui 5 horas será: ' + 
    adicionarHoras(new Date(), 5).toLocaleString());
</script>
 
</body>
</html>

Ao executar este código nós teremos o seguinte resultado:

Agora são: 24/03/2021 17:21:40
Daqui 5 horas será: 24/03/2021 22:21:40


JavaScript ::: Dicas & Truques ::: Strings e Caracteres

Como remover os espaços no final de uma string em JavaScript usando uma função trim_final() personalizada

Quantidade de visualizações: 64 vezes
Há muitos anos eu precisava remover espaços no final de uma string em JavaScript e percebi que o objeto String, na época, não oferecia a função trim(). Não me restou opção a não ser sentar e escrever o código na mão mesmo. Hoje em dia não precisamos mais dele, mas fica aí para que você entenda a lógica empregada na resolução do problema.

Veja a página HTML completa com o exemplo:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<!doctype html>
<html>
<head>
  <title>Strings em JavaScript</title>
</head>
<body>

<script type="text/javascript">
  // função personalizada que remove os espaços
  // no final de uma string
  function trim_final(string){
    // primeiro definimos o código do espaço
    var espaco = String.fromCharCode(32);
    // obtemos o tamanho da string
    var tamanho = string.length;
    // e criamos uma string temporária
    var temp = "";
    
    // a string está vazia?
    if(tamanho < 0){
      return "";
    }
  
    // uma variável temporária para percorrermos
    // a string de trás para frente
    var temp2 = tamanho - 1;
    while(temp2 > -1){
      if(string.charAt(temp2) == espaco){
        // não faz nada
      }
      else{
        temp = string.substring(0, temp2 + 1);
        break;
      }
      
      // decrementamos a variável temp2
      temp2--;
    }
    
    return temp;
  }
  
  // vamos testar a função trim_final()
  var frase = "Gosto muito de JavaScript   ";
  document.write("Com espaços no final: " + 
    frase + "#" + "<br>");
	
  // vamos remover os espaços no final da string
  frase = trim_final(frase);
  document.write("Sem espaços no final: " + 
    frase + "#" + "<br>");  
</script>
  
</body>
</html>

Ao executar este código JavaScript nós teremos o seguinte resultado:

Com espaços no final: Gosto muito de JavaScript #
Sem espaços no final: Gosto muito de JavaScript#


Desafios, Exercícios e Algoritmos Resolvidos de JavaScript

Veja mais Dicas e truques de JavaScript

Dicas e truques de outras linguagens

Códigos Fonte

Programa de Gestão Financeira Controle de Contas a Pagar e a Receber com Cadastro de Clientes e FornecedoresSoftware de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimento
Diga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais
Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesControle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidades
Tenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: C
6º lugar: Delphi
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby



© 2025 Arquivo de Códigos - Todos os direitos reservados
Neste momento há 51 usuários muito felizes estudando em nosso site.