Beginners Blog : Inner HTML

-First of all:

you should know the relationship between JavaScript and HTML where JavaScript is a way to make the events in the HTML page turn it to actions.
get elements from HTML page you can see this article: JavaScript and HTML
Now,after we get our element from the HTML page we want to use it and change it for example we'll have text box and label and button after clicking a button we should get the value of our text box and see if its equal to zero and then if it was zero we should write zero in the label

-Document.getElementById("Id"):

Document is an object and it has a special method getElementById(id_String) this will get the element from HTML page and every element in HTML page has a unique ID we declare it there's no defaults here we should give every element we want to use a special ID.

-InnerHTML:

if we write var x=document.getElementById("text"); this will store an object in the variable x and since its an object so it has special properties and methods one of the is InnerHTML this will get the HTML inside that element if it was a tag or a text
x.innerHTML: this will take the HTML inside the element of ID text so if we write y=x.innerHTML; so for example if the element of ID has a text "hello" then y will have a value "hello"
if we want to change whats inside that HTML element of Id "text" we can easily do this:

as you can see in this code first we get the HTML element which is an Object and have a special methods and properties just like x.value and y.innerHTML the first one is used to get the value of text boxes and the second is to change the html inside that tag of the ID "text"
lets see how does it look like :

lets put 1 in the text box then click the button:

innerHTML will delete everything in that tag if it was text or any other tag so BE AWARE .

-Related to this post:

Beginners Blog