Este exemplo foi criado a partir da necessidade num projeto que fiz, onde tinha arquivos que seria livres e outros privados.
Neste exemplo mostro como criar um campo input ao click em um link ou botão.
Função que cria o elemento DOM
/**
* Função criar componente usando DOM
* Evento onclick
* @author Deusimar Ferreira
*/
function criaElemento() {
// Verifica se já foi criado o elemento
if(!document.getElementById('labelInput')){
// Label area senha
var labelInput = document.createElement('label'); // Cria um elemento label
labelInput.innerHTML = 'Senha: '; // Define o texto
labelInput.id = 'labelInput'; // Define ID
// Input type password
var input = document.createElement('input'); // Cria um elemento input
input.type = 'password'; // Define o tipo como password
input.name = 'senha'; // Define o nome como senha
input.id = 'senha'; // Define o Id com senha
input.size = '10'; // Define o tamanho para 10
labelInput.appendChild(input); // Adiciona o input ao label
document.body.appendChild(labelInput); // Adiciona o label ao corpo do documento
}
}
Função que remover o elemento DOM
/**
* Função remove componente
* Evento onclick
* @author Deusimar Ferreira
*/
function removeElemento() {
document.body.removeChild(document.getElementById('labelInput')); // Remove os elementos do corpo do documento
}