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 JavaScriptQuantidade 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 JavaScriptQuantidade 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() personalizadaQuantidade 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 |
Python - Exercícios Resolvidos de Python - Como converter de binário para decimal em Python usando o laço for Java - Estruturas de Dados em Java - Como inserir nós no final de uma lista singularmente ligada em Java |
Códigos Fonte |
Software 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 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 |