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”
When you realize you can hack your school district with javascript
nice
why is your repo's for the course on github empty?
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.
Good to know, it always comes in handy when im feeling lazy to rewrite my code.😜
Thank you so much!
1:40 Hey Shaun Hello… We welcome you in the future… May sound wierd though…. 🙂
THANKS (FROM FUTURE)
Can you explain the use of 'outerHTML' too? 🙂
Where is the element "book" located? I see the "books" array and "name" class, but cannot find the "book" element. Thanks!
Thank you !
Thank you so much for mentioning the difference between querySelectorAll(classname) and getElementByClassName(classname), that was really helpful. thanks again.
Why aint I able to use this in brackets?? The function 'querySelectorAll' isnt working on that. Help me out !!!
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
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.
Hi Shaun, wher is files from https://github.com/iamshaunjp/JavaScript-DOM-Tutorial ?
Iv'e been trying to the forEach method on "querySelector" but nothing ever makes it to the output, any suggestions?
Why make the bookList a const? Is it because it's an ID? Is it a good practice and why?
Can we use insertAdjacentHTML() instead of innerHtml?
someone please help me everytime i write a concole command i get undefined or null
Merci 🙂
Shaun from the future XD hahaha
Man you' re making such great tutorials …
could you please explain the difference between
textContent vs innerText ? …
Thanks.
I don't think you're capable of making a bad tech video! Another great job, Net Ninja!
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 !!