SHARE

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 🙂

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

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

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

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

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

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

https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

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

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

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

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

16 COMMENTS

  1. DOM is fucking boring..the worst part of JavaScript…i am like, i just stopped taking notes…a real fucked up topic..cant wait to go to Javascript Events…

  2. 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.

  3. hey @NetNinja i get this error for var name = document.getElementById("navigation").getElementsByTagName("ul")[0];
    VM932:1 Uncaught TypeError: Cannot read property 'getElementsByTagName' of null

  4. I really liked this tutorials and ive learned so much with them! But I have a doubt… Why would I do this in JS if I could just go to HTML or CSS and edit it there? Can someone help please?

  5. Thanks so much for this video series! Quick question – why does it remove the link at the bottom and create it at the top? Surely it shuld have one at the bottom and the top? Why is the first rule being overridden?

  6. 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!

  7. 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.

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here