JavaScript innerHTML

I was going through a few tutorials for AJAX and I found out about a javascript property I hadn’t heard before.Its called innerHTML.

innerHTML is used together with getElementById to change the content or properties of an html tag.

getElementById is a property of the document object and is used to retrieve an HTML element on the basis of its id.

This creates an input box with id ‘test’ Our javascript function to access its content would be as follows..

function check()
{
var content= document.getElementById('text');
	alert("You entered: " + content.value)
}

You can use .value only when the element is of input type.However if the element is not of input type then you’ll have to use innerHTML.. innerHTML allows you to change a chunk of code between the starting and closing tags of a certain element specified using its id. The things you need to do are

1) Create and element and assign an id to it To assign an id to an element simple use the id attribute.

 You haven’t clicked GO yet!

Now that an id has been assigned to this <p> I can refer to it in my javascript and manipulate it.

2)Create a java script function to get the element by its id and change its innerHTML.

%MINIFYHTML4da8b3a6d2fdfef127dc17ddbc2b0e8e10%

3) Create a button to call the function.

This creates a submit button which when clicked calls the change function.

The entire code would be as follows.

%MINIFYHTML4da8b3a6d2fdfef127dc17ddbc2b0e8e11%

 You haven’t clicked GO yet!