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

Original source


23 responses to “JavaScript DOM Tutorial #5 – Changing Text & HTML Content”

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

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