Como criar um elemento HTML através do JavaScript usando CreateElement

HTML é uma linguagem de marcação que fornece estrutura às nossas páginas da web, enquanto o JavaScript é uma linguagem de programação da Web que oferece interatividade com o usuário. Principalmente, por simplicidade, os desenvolvedores definem e criam elementos dentro de HTML. No entanto, não é a única maneira de criar elementos e também podemos criar elementos usando o método do objeto de documento JavaScript createElement () Para tornar nossa página da web mais dinâmica. Devido ao objeto do documento, podemos acessar elementos HTML.

O que é CreateElement ()?

O createElement () é um método interno de objeto de documento que tem a função de criar dinamicamente um elemento HTML e retornar o elemento HTML recém-criado.

O sintaxe de createElement () é dado abaixo:

var cria criando o documento = documento.createElement (htmltaGName);

O createElement () leva um parâmetro HtmlTagName que é um parâmetro obrigatório da string do tipo e é o nome da tag de um elemento HTML.

Deve -se notar que o createElement () O método cria um elemento html, no entanto, para anexar o elemento ao documento (página da web), temos que usar o ApndendChild () ou insertBefore () métodos.

Agora que sabemos o que o createElement () O método é, vejamos um exemplo para entender melhor o createElement () método.

Exemplo 1:

Neste exemplo, criaremos um elemento de botão a partir de JavaScript com o clique de um botão já existente.

Vamos primeiro criar um botão em html que tenha um ONCLICK evento anexado a ele.

Botão mágico

Sempre que um usuário clicar no botão, ele começará a executar o myfunc () função. No final, usamos o roteiro etiqueta e forneceu a fonte (código.JS) do arquivo JavaScript que contém o myfunc () função.

O código JavaScript é fornecido abaixo:

function myfunc ()
var mybtn = documento.createElement ("botão");
mybtn.inerhtml = "novo botão";
documento.corpo.ApndendChild (mybtn);

No código acima, primeiro, inicializamos o myfunc () função e depois criou um elemento de botão usando o createElement () método. Então, para dar ao botão um título, usamos o mybtn.Innerhtml propriedade. No final, anexamos o botão ao corpo do nosso HTML usando o ApndendChild () método.

A saída é dada abaixo:

Podemos ver isso sempre que clicarmos no Botão mágico, Ele cria um novo botão com o título “Novo botão”.

Exemplo2:

Neste exemplo, criaremos um H2 tag de html através de javascript e depois anexe -o com o corpo html usando o insertBefore () método.

Para esse fim, vamos primeiro escrever o código HTML:

Insira o rumo acima disso

Botão mágico

O restante do código é o mesmo do Exemplo 1, com a exceção de que agora criamos um elemento div dentro que criamos um

Tag com o ID "pára".

O código JavaScript é fornecido abaixo:

function myfunc ()
var myContainer = documento.getElementById ("myContainer");
var para = documento.getElementById ("para");
var myheading = documento.createElement ("H2");
minha cabeça.innerhtml = "novo cabeçalho";
myContainer.inserir antes (minha cabeça, parágrafo);

Dentro da função, primeiro obtemos a referência do e

Elemento de HTML. Então criamos um

elemento usando createElement () método. Para inseri -lo antes do

Elemento que usamos o insertBefore () método onde passamos o recém -criado

tag e o

A saída do código acima é dada abaixo:

Sempre que clicamos no botão mágico, um novo elemento H2 é criado via JavaScript createElement () método.

Conclusão

O objeto do documento nos dá acesso a elementos html e um dos métodos internos dos objetos do documento é o createElement () método. O createElement () O método é usado para criar um elemento html dinamicamente, tomando o nome da tag html como seu parâmetro e depois retornando o elemento HTML recém -criado. Para anexar o elemento HTML recém -criado ao HTML, usamos o ApndendChild () ou insertBefore () métodos.

Neste post, vimos como criar um elemento HTML usando o createElement () Método em JavaScript.