Create HTML with JS | createElement()

Показать описание

In this video I go over how to create HTML with JavaScript. I show you how to add an EventListener to a button that will call a function. I go over how to use createElement() to make a div in the HTML, how to add a class to these new divs and alternate styles.

In this video I show you:
0:29 - Starting Code
1:38 - Variables in JavaScript
2:31 - Add an EventListener to the HTML Button
3:10 - AddNew Div function
3:23 - How to use createElement
4:18 - How to use appendChild to the body
5:01 - How to add a class to the newDiv
6:41 - How to place the newDivs in a particular container
8:19 - How to make the newDivs flow horizontally
9:23 - How to alternate div styles with :nth-child

#htmlcssjs #jstutorial #createelement

Let's Connect

Рекомендации по теме

Комментарии

You explain this so well. I'm on a course in Udacity and you make much easier to understand. Thanks for sharing your knowledge!

granolasoos

Finally!!! Exactly what I was searching, thanks.

vin_

Wonderful explanation of walking us through the elements creation and stacking them the way want. I am very thankful and feel lucky to see the video.

richcaro

Thank you so much! I needed this to build my first js project.

khanh

Great instruction, designing eye, and flow in your video. Learned some new styling tricks along with the subject.

eborne

Subbed. The easiest to understand on this subject I've found.

Rehd

Something I had trouble finding by searching, but thankfully stumbled into thanks to the sheer number of tutorials and examples I was reading: you can reference an element's ID with querySelector by using a hash instead of a period, as in CSS. E.g.

fluffypink

Thank you so much! Your explanation was very clear, i love how you explained what each part of the comands are for. It helped a lot!

vitopos

Thanks! This was super helpful and exactly what I was looking for!

scienfish

Thanks 😊 wonderful explication, you make it easy
😘

nahlayasmine

love your work, your way to explain sound so easy, and your excellent tune voice, you have all the skills and talents. thank you for making the time .

williammartinez

Hi Angela,
I love your videos - they are clear and easy to follow.
My friends, who are teachers, want me to ask you how you do such a clear audio presentation. What programs do you use to make the audio? Do you edit it after you're done?? Could you please make a video that shows teachers how to make a clear audio? to go along with their visual lesson. Thanks so much!

gracedelise

This is exactly what I wanted. Thank you very much.

monkyout

Thanks! I this video helped me so much!

ElTokam

If you too are trying to understand how to put text in, in the function you have to add a text label where you write the text, than you have to:
1 create a "var" in the function that gets the value of the text label with this code (replace EG with the name you want!): var EG =
2 in the function say that EG will be append to the div(in this case, I'm calling it Message) that is going to be created: Message.append(EG);
3 try to write something in the label then press the button and... magic.
Like if it worked.

ginopino