Changing text

The innerHTML property defines both the HTML code and the plain text that resides withing a certain element. To obtain the innerHTML property of an element you must know its id.
A HTML element id is set as a attribute within the HTML tag:

<body id="myBody"></body>

This will now enable us to tamper with the content of myBody by accessing its innerHTML property using javascript:

var body = document.getElementById("myBody");

body.innerHTML = "Some text in the body!";

Above code would add some text to the body element which would look like this now:

<body id="myBody">Some text in the body!</body>

Example of changing the text in tags

<html>

    <head>

    <script type="text/javascript">

        function changeText() {

            var header = document.getElementById("header");

            var paragraph = document.getElementById("paragraph");



            header.innerHTML = "A crappy header...";

            paragraph.innerHTML = "A dull paragraph...";

        };

    </script>

    <title>Our experiment</title>

    </head>

    

    <body>

        <h1 id="header">A fantastic header</h1>

        <p id="paragraph">A perilous paragraph</p>

        <input type="submit" onclick="changeText()" />

    </body>



</html>

You can view an example of this here

Changing the class of HTML element

Using the className property of an element we change its current css class. This could be handy in many ways.

Here's an example:

<html>

    <head>

    <script type="text/javascript">

        function changeClass() {

            var paragraph = document.getElementById("paragraph");

            paragraph.className = "p2";

        };

    </script>

    <style type="text/css">

        .p1{ font-weight: bold; }

        .p2{ font-family: normal; }

    </style>

    <title>Our experiment</title>

    </head>

    

    <body>

        <p id="paragraph" class="p1">I am Lorem Ipsum!</p>

        <input type="submit" onclick="changeClass()" />

    </body>



</html>

You can try it yourself here.

This could of course be used to handle hovering events if you want it to work via javascript instead of css:

<html>

    <head>

    <script type="text/javascript">

        function changeClass(newClass) {

            var paragraph = document.getElementById("paragraph");

            paragraph.className = newClass;

        };

    </script>

    <style type="text/css">

        .p1{ font-weight: bold; }

        .p2{ font-family: normal; }

    </style>

    <title>Our experiment</title>

    </head>

    

    <body>

        <p id="paragraph" class="p2" onmouseover="changeClass('p1');" onmouseout="changeClass('p2');">I am Lorem Ipsum!</p>

    </body>



</html>

You can try it yourself here.

Changing a picture source

If you would like to change a picture using javascript there are no obstacles. Just remember to preload the images using javascript if you want a hovering effect:

<html>

    <head>

    <script type="text/javascript">

		function loadImages(){

			otherImage = new Image();

			otherImage.src = "exampleButton2.png";

		}

        function changePicture(newPicture) {

            var myImage = document.getElementById("myPicture");

            myImage.src = newPicture;

        };

    </script>

    <title>Our experiment</title>

    </head>

    

    <body onload="loadImages()">

        <img id="myPicture" src="exampleButton1.png"

                            onmouseover="changePicture('exampleButton2.png')"

                            onmouseout="changePicture('exampleButton1.png')" />

    </body>



</html>

You can try it yourself here.

Changing a link

This is how you change a link:

<html>

    <head>

    <script type="text/javascript">

        function changeLink(newUrl, newText) {

            var myLink = document.getElementById("myLink");

            myLink.href = newUrl;

			myLink.innerHTML = newText;

        };

    </script>

    <title>Our experiment</title>

    </head>

    

    <body onload="loadImages()">

        <a href="http://www.google.com" id="myLink">Google</a>

		<input type="submit" onclick="changeLink('http://www.yahoo.com', 'Yahoo'); return false;" />

    </body>



</html>

You can try it yourself here.

There are no comments on this article.

Leave a message!

If you have any question or just want to leave a message, just fill out the form below!

Your e-mail will not be visible in your post, it is for validation reasons only

Name:
E-mail:
Comment: