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:

---------------------------------------------------------------------------------------------
Other tutorials:

----- JAVASCRIPT FOR BEGINNERS:

----- CSS FOR BEGINNERS:

----- NODE.JS TUTORIALS

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

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

[RealToughCandy]

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

[donatusbrainokwe]

You've always made my day with your indepth tutorials. Thanks man

[webapplicationguide]

Synopsis:

will return nodelist

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

[knoiohi]

Best tutorial ever! The additional knowledge brought by the clarification you explained is the cherry on top of the ice cream. It really shows that you truly care about your students ❤

[Tomtastic]

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

[amrwery]

Thanks bro
I always learn from you
I am vue js developer but sometimes I check old tutorials like this one to refresh my info

Thanks again and keep going

[simonesalvalaggio]

With "querySelectorAll" you can use the forEach without trasform it in array

[daviddelvin]

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

[kalamashaka]

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

[moneyharry]

Can we use insertAdjacentHTML() instead of innerHtml?

[lotusblossom]

Hi, is there a way to dynamically find a node from its innerHTML/innerText and then change that text? So the challenge I am working on is they give me a string, and tell me to change the string. Now I can easily do that by looking at the class, but if the doc were thousands lines long, that would be a problem.

[julcro]

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.

[ga]

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

[haseebquadri]

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

[hyfytale]

Can you explain the use of 'outerHTML' too? :)

[petermuller]

There are 2 ways to sdd text content into html. When should we use CSS i.e. content:before and when should we use javascript?

[paulca]

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.

[satangwong]

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

[ManontheBroadcast]

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

[hueyp.freeman]

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