JavaScript Tutorial For Beginners #37 - Adding Elements to the DOM

Hey all! So for I've taught you how to change existing content in the DOM, but in this JavaScript tutorial I want to show you how to add new elements too!

To do this we use the createElement method, and then insert the new element into the DOM by using either one of the following methods:

appendChild(child)
insertBefore(child, element)

If you have any questions, fire away :)

========== JavaScript for Beginners Playlist ==========

========== CSS for Beginners Playlist ==========

========== HTML for Beginners Playlist ==========

========== The Net Ninja ============

========== Social Links ==========

[Ilsasta]

I came across your tutorial by browsing "how to add elements to HTML in JS", and have watched tons before this one (I am serious, tons!!!).
Your tutorial is the only one that explains it in such a simple and graphic way...you are a star, thanks a lot.

[Andrei-dsqv]

GREAT TUTORIAL, i can clearly see that you understand those things so the way you talk is so clear, becuase your ideas are so clear!!!
thanks

[charsipanda]

I had started my web development career after watching this channel content.

[LAHEX-ytux]

You my friend, are a didactical genius. After reading a couple of well-renowned JS books on the subject, I couldn't really get it. This made it crystal clear.

("You're very good, you. Yoouu got a gift. Yes you do... yes you DO!")

Thank so much!

[ugosouza]

I have been for the past hour struggling to finish an assignment and you just showed me what I was missing! So simple that I even feel silly. Many thanks

[liadfru]

Your tutorials are great, and much appreciated :)

[tymothylim]

Thank you very much for this video! It was really cool seeing how li tags can be shifted around! Didn't know JavaScript could do that :) Learnt a lot!

[diegoguatemala]

I am honestly very thankful, I think all of us do really appreciate your commitment and effort to just give us this great content at no cost. Thanks man!

[datBoiDee]

I really really really appreciate the videos. Did I say I appreciate the videos. You made every thing understandable I've watched hundreds of hours of videos on JavaScript. When I found your page last night, I knew I was on my way to fully somewhat understanding JavaScript. Thanks again. #codeForLife.

[benclayton-green]

Great Tutorials. A more specific compliment is where you explain what you're gonna do in simple English mixed with some spoken code at 2:28 . Then anything done after can be seen in the context of what we're trying to accomplish.

[ark]

Perfect ! You did a great job explaining it quick and efficient!

[philip]

Hello, your video is very complete but how do you get the elements from a form that has just been completed by the user ?

[abdulaziz]

GREAT Sir, Thank you for the real-time practical.

[ubermensch-mne]

It's much easier to use ul') for selecting menu.

[natashasimone]

Amazing Tutorial!!Just did my first ever appendChild! :-)

[elisberglior]

great tutorial!! no doubt... but i can't really get the hang of why do why need to insert a new tag to the html using js? why not got straight to our .html file and add the desired elements? thanx

[tom-czjx]

Im new to coding but, That was alot of steps to add a link.. isnt it just easier to edit the actual HTML somehow?

[tranhuuang]

So? After we insert <li> before ul.li[0] element, what is <li> inserted stand for, is it be come the first element of <ul>?

[daniellemedeiros]

Thank you for this tutorial! Can you explain a bit more as to why [0] is added onto (at 3:30 in the video)? Thanks!

[igor]

Great videos, I've learnt so mush from your tuts! I have a question: what if I have to add two identical elements(for example, <p>) in different places? Thanks in advance!