Neste artigo, discutiremos como criar um elemento HTML via JavaScript. Aqui veremos alguns exemplos para inserir o elemento criado no documento.
Criar elementos por HTML não é a única maneira de criar elementos. Porém, para simplificar, muitas vezes criamos elementos diretamente no documento HTML, mas usando JavaScript também é possível criar elementos.
O document.createElement() é usado para criar dinamicamente um nó de elemento HTML com o nome especificado via JavaScript. Este método usa o nome do elemento como parâmetro e cria esse nó de elemento.
Após a criação de um elemento, podemos usar o método appendChild() ou o método insertBefore() para inserir o elemento criado no documento.
Podemos usar o removerCriança() método para remover um nó e também pode usar o substituirCriança() método para substituir o nó.
Sintaxe
document.createElement(nodename);
Este método aceita um único valor de parâmetro declarado da seguinte forma:
string de acréscimo java
nome do nó: É o parâmetro obrigatório. Este parâmetro é do tipo string. Especifica o nome do elemento que devemos criar. O nome do elemento especificado no parâmetro criará o elemento; caso contrário, se o nome do elemento especificado não for reconhecido, um elemento HTML desconhecido será criado.
O document.createElement() retornará o elemento recém-criado.
Agora, vamos ver alguns exemplos de uso do document.createElement() método. Aqui, mostraremos dois exemplos. No primeiro exemplo, usaremos o anexarCriança() método para inserir o elemento no documento, e no segundo exemplo, usaremos o inserir antes() método para inserir um elemento criado pelo document.createElement() método.
Exemplo 1
Neste exemplo, estamos usando o document.createElement() método para criar um novo elemento de botão. Iremos inserir o elemento criado usando o anexarCriança() método. Aqui, há um diversão() método que criará um novo elemento de botão usando o criarElemento() método. Definimos o texto usando o HTML interno que será exibido na parte superior do botão.
Vejamos o exemplo dado abaixo.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; document.body.appendChild(btn); } <h2> It is an example of using the document.createElement() method. </h2> <h4> Click the below button to insert a new button element in the document. </h4> Create Button Teste agora Saída
Após a execução do código acima, a saída será -
Depois de clicar no botão fornecido, a saída será -
Exemplo2
Neste exemplo, estamos usando o document.createElement() método para criar um novo elemento de botão. Aqui, estamos usando o inserir antes() método para inserir o elemento criado. Existe um elemento div que possui um elemento filho de parágrafo. O novo elemento botão será inserido antes do elemento filho parágrafo do elemento div.
Vejamos o exemplo dado abaixo.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; var element = document.getElementById('d1'); var child = document.getElementById('p1'); element.insertBefore(btn, child); } <h2> It is an example of using the document.createElement() method. </h2> <h4 id="heading4"> Click the below button to insert a new button element in the document. </h4> <p id="p1"> This is a paragraph. </p> Create Button Teste agora Saída
Após a execução do código acima, a saída será -
Depois de clicar no botão acima, a saída será -
A captura de tela acima mostra que o novo elemento de botão é inserido antes do elemento de parágrafo. Isso ocorre porque usamos o inserirBeofre() método para inserir o novo elemento criado usando o document.createElement() método.