MorkaLork Development

Interesting stuff I've picked up over the years...

Altering html with javascript

2009-10-13 12:26:52 | 726 views | html javascript inner innerhtml alter altering

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.


Article comments

Feel free to comment this article using a facebook profile.

I'm using facebook accounts for identification since even akismet couldn't handle all the spam I receive every day.