JavaScript Tutorial For Beginners #34 - Changing Page Content

Yo ninjas! In this JavaScript tutorial, I'll be showing you how to change your web page content on the fly via the DOM. To do this, we must follow two steps:

1. Reach into the page and grab a node / element
2. Change the property of that note (either innerHTML or textContent).

In this video, I do sometimes refer to these properties as methods - that is my mistake, although the concept is still very clear to see.

If you have any questions, fire away :).

========== JavaScript for Beginners Playlist ==========

========== CSS for Beginners Playlist ==========

========== HTML for Beginners Playlist ==========

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

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

[legendaryknight]

Every day I watch your tutorials and listen to your voice and get a lot of energy from them, you are my great source of inspiration. I feel you are my friend who is sitting next to me and teaching me this great stuff. Forever you will be in my mind and heart. you changed my life dramatically to become a successful person in my life . Thank you so much ❤.

[baybay]

I find your tutorials very easy to follow. Thanks for the great content, I now conquered my fear of javascripts

[LewisVine]

Very straightforward explanations after I'd spent two hours banging my head against the wall in another paid-tutorial! Thank you.

[sandeepgh]

Ninja Way of teaching how to code in Javascript... Awesome men .

[ibrahim]

This is a very good video on teaching us JavaScript, but if you change any code on the Elements panel. It will only change only for that time once you refresh the page or close the browser and open the same page again it will disappear the changes that you have made.

[tristalu]

you saved my life. I wish you are my professor QQ

[ishaaqolwi]

I LOVE your videos and your explanations!
Many many thanks for what you have given us. :)

[tymothylim]

Thank you very much for this video! It was very helpful and interesting to watch! :)

[lukeskywalker-rbsj]

What is it called when i want to make a single html file but when i navigate through menu buttons it will change my whole content without creating and linking to another file. Is this the same?

[jeromelazaga]

Thank you so much..this solve my problem just now..

[michealbailey]

Hey Net Ninja, besides the syntax is there really any major difference between what these two properties can do?

[ElkaakaaDZ]

can we change an option on a page, for example from Disable to Enabled??
thank u

[markspeeps]

Hello I've been working with Autohotkey it is a great program however documentation is lacking. So I found your videos, excellent by the way. What editor or software are you using to do your editing? Just a beginner.

[matebali]

Fantastic course! I have a question: How do I make a change of content so that the function works back and forth any time?

Example:

CSS:
#blue {
color: blue;
}
#red {
color: red;
}

HTML:
<h1 id="blue">Text</h1>
<button id="colorset">Colorset button</button>

Script:
= function() {
var text =
text.setAttribute("id", "red");

= function() {
var text =
text.setAttribute("id", "blue");
}
}

[iwantcookies]

Hello, what if i wanna just add something to all my <h2> </h2> on my page without removing all the content. Just to add something at the beginning of the h2 text ?

[damianroiz]

would it better to store the content in an array and switch it over with event listeners?

[dubfactor]

I can not process #34, Changing Page Content. I can not find a page with such simple classes or IDs or tagnames. I haven't been able to change a drop of page content.

[qureshiowais]

but what if page reload? I want to log in and change the style. but after login, if i reload it the page get back to signout but in reality it not logout!

[window.location]

sir how to change html content via server side
i means server should have control to change

[Peekaymaja]

How about

myTitle.innerHTML = "Yo Ninja would this work?" ;