JavaScript DOM Tutorial #5 – Changing Text & HTML Content



Hey gang, in this JavaScript DOM tutorial I’ll be showing you how we can edit text content and HTML content using two different properties – textContent and innerHTML.

—– COURSE LINKS:
+ Atom editor – https://atom.io/a
+ GitHub Repo – https://github.com/iamshaunjp/JavaScript-DOM-Tutorial

———————————————————————————————
Other tutorials:

—– JAVASCRIPT FOR BEGINNERS:

—– CSS FOR BEGINNERS:

—– NODE.JS TUTORIALS

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

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

29 thoughts on “JavaScript DOM Tutorial #5 – Changing Text & HTML Content

  1. I'm not sure how you're refreshing your console and getting code from atom. Every time I try my console is blank. This was made all the way back in 2017 but maybe someone will help me?

  2. Hi Net Ninja! This is exactly what I need to learn in order to do some fancy scripting on our school's LMS. I am missing the prerequisite knowledge of what a nodelist is versus an array and all that tricky stuff. So, I am about to sign up for your Net Ninja Udemy class and want to know when we get to this stuff because the project I need done is overdue! Thanks for any help. I am going to watch this tutorial 5 more times to see if something clicks.

  3. Thank you so much for mentioning the difference between querySelectorAll(classname) and getElementByClassName(classname), that was really helpful. thanks again.

  4. Hello! I used queryselectorAll on a part of my code to grab two buttons of the same class. What I would want to happen is one I click on one of the buttons, it changes the text of that particular button. However, I made a Foreach function and it still changes for every button. is there something that I am missing, or must I give them individual classes and functions? thank you in advance

  5. It is worth noting that Array.from() is an ES6 addition and not supported in Internet Explorer, so depending on which browsers you need to support it may not be an option.

  6. Synopsis:

    document.querySelectorAll(".name") will return nodelist

    document.getElementsByClassName(".name") will return HTML Collection

    we can use Array.from() method to convert HTML Collection to Array and then we can apply forEach.

    ——————————————————————————-

    we can use textcontent to grab the existing content of the tag or to assign new text.

    we can use innerHTML to grab the existing content of the tag or to assign new text , append to existing HTML.

    Thank You !!

Leave a Reply

Your email address will not be published. Required fields are marked *