0

Criando elementos HTML via JavaScript

#JavaScript
Diego Morais
Diego Morais

Se voçê conhece alguns dos meus artigos já percebe a possibilidade de estilizar um elemento HTML por meio do Javascript .Ainda não sabe como?visite meu perfil e conferi ai:).Dai depois poderá exercitar seu aprendizado não só criando o elemento mas também dando uma "cara bonita" pra ele.


vamos lá!!

Nesse tutorial criaremos elemento html usando duas funções:

  1. createElement()
  2. appendChild()


Primeiramente criaremos uma div vazia e um botão no html

<div></div>
<button type="button" onclick='criar()' >cria elemento</button>

Agora na tag script criaremos uma função chamada criar() na qual criaremos um elemento

A função createElement() cria o elemento que especificamos como parãmetro pode ser p,img,etc..e quando queremos colocar conteudo de texto no elemento usamos o método textContent que recebe um valor para tal elemento,como fiz no exemplo.è importante colocar esse elemento criado dentro dentro de uma variável.

Apo´s criar o elemento e dar um estilo básico pra ele eu usei o método querySelector() e por meio dele guardei dentro de uma variável aquela div que criamos no html .Após isso usei o método appendChild(),a função dele é rendenrizar o elemento que criamos aonde quer que queiramos, como parãmetro voçê passa o elemento criado,como coloquei o elemento na variável eu passei o nome de tal variável.Pra finalizar adicionei a função criada á função onclick no botão html.Abaixo todo o código detalhado.

Espero que tenham gostado!!


<script>
function criar(){
var p=document.createElement('p')
p.textContent="Aprendendo criar elementos"
p.style.color='white'
p.style.backgroundColor='blue'
p.style.padding='15px'
p.style.margin='15px'


var cx=document.querySelector('div')
cx.appendChild(p)



Para mais artigos diretos sobre linguagens de programação me siga e compartilhe com os colegas!!

Deixa a sua dúvida nos comentários

 Me siga para mais dicas e tutoriais para iniciantes e intermediários😊

Dê seu feedback do artigo nos comentários😊

Compartilhe com amigos😊


Me siga no GitHub: https://github.com/DiegoDevJR

Me siga no Linkedin: https://www.linkedin.com/in/diego-dutra-b811b31aa/

1
19

Comentários (1)

0
R

Rebecca Ignacio

22/04/2021 03:42

Bom tutorial! Parabéns

Estudante e Amante de programação

Brasil