• Tuesday , 2 June 2020

JavaScript DOM Tutorial #5 – Changing Text & HTML Content

Code Canyon



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

3d Ocean

Related Posts

23 Comments

  1. EthicalGro
    April 30, 2019 at 05:22

    When you realize you can hack your school district with javascript
    nice

  2. TheLeonKwameShow
    April 30, 2019 at 05:22

    why is your repo's for the course on github empty?

  3. Aditya Tiwari
    April 30, 2019 at 05:22

    https://davidwalsh.name/nodelist-array Please check this link, it says node list is array-like but don't feature many of the methods provided by the Array, like forEach, map, filter, etc.

  4. Techie Tom
    April 30, 2019 at 05:22

    Good to know, it always comes in handy when im feeling lazy to rewrite my code.😜

  5. Abaramotorai
    April 30, 2019 at 05:22

    Thank you so much!

  6. Imran Rather
    April 30, 2019 at 05:22

    1:40 Hey Shaun Hello… We welcome you in the future… May sound wierd though…. 🙂
    THANKS (FROM FUTURE)

  7. UnorthodoxThing
    April 30, 2019 at 05:22

    Can you explain the use of 'outerHTML' too? 🙂

  8. satang wong
    April 30, 2019 at 05:22

    Where is the element "book" located? I see the "books" array and "name" class, but cannot find the "book" element. Thanks!

  9. Stefania Iaquinta
    April 30, 2019 at 05:22

    Thank you !

  10. Gamal Abdall
    April 30, 2019 at 05:22

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

  11. Haseeb Quadri
    April 30, 2019 at 05:22

    Why aint I able to use this in brackets?? The function 'querySelectorAll' isnt working on that. Help me out !!!

  12. David Delvin
    April 30, 2019 at 05:22

    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

  13. Paul Cass
    April 30, 2019 at 05:22

    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.

  14. Milda Rimšienė
    April 30, 2019 at 05:22

    Hi Shaun, wher is files from https://github.com/iamshaunjp/JavaScript-DOM-Tutorial ?

  15. Huey P. Freeman
    April 30, 2019 at 05:22

    Iv'e been trying to the forEach method on "querySelector" but nothing ever makes it to the output, any suggestions?

  16. scraper1000
    April 30, 2019 at 05:22

    Why make the bookList a const? Is it because it's an ID? Is it a good practice and why?

  17. Harry TM
    April 30, 2019 at 05:22

    Can we use insertAdjacentHTML() instead of innerHtml?

  18. Nelson Ongiti
    April 30, 2019 at 05:22

    someone please help me everytime i write a concole command i get undefined or null

  19. David Eugene
    April 30, 2019 at 05:22

    Merci 🙂

  20. Jenny C
    April 30, 2019 at 05:22

    Shaun from the future XD hahaha

  21. Man-on-the-Run
    April 30, 2019 at 05:22

    Man you' re making such great tutorials …
    could you please explain the difference between
    textContent vs innerText ? …
    Thanks.

  22. RealToughCandy
    April 30, 2019 at 05:22

    I don't think you're capable of making a bad tech video! Another great job, Net Ninja!

  23. Web Application Guide
    April 30, 2019 at 05:22

    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 Comment

You must be logged in to post a comment.