How to Change The Interior of Your Webpage…

… without erasing the entire thing. In this article, I’ll teach you how to do this by editing a single division, making it easy for you to add a feature on your web page that changes with a Javascript function. (My example will use a button, since that’s a simple user interaction.)

Javascript makes it simple to edit the code within tags. For example, suppose we set up a division:

<div id=”somediv”></div>

Within a Javascript function, we can easily change the contents of this tag by changing its interior html code. First, we grab the tag:

var element = document.getElementById( “somediv” )

Recall that “var” means variable. Basically, what I’m doing here is saving a pointer to an element in the document with the id “somediv”. The only thing in our document with that ID should be the division I presented above.

We access the interior HMTL of the division by simply tacking on “innerHTML”. Save a string to this to change the interior HTML. It could look something like this:

document.getElementById( “somediv” ).innerHTML = “<p>New paragraph</p>”;
OR
element.innerHTML = “<p>New paragraph</p>”;

Within this division, or any HTML tag, are something called “child nodes”. For all intensive purposes, these are other tags. We edit these almost exactly the same way as the division (because they also have an element called “innerHMTL”). The only difference is that we have to add childNodes[ childNumber ] between the “getElementByID(…)” and the “innerHTML”.

Do note that when you are saving to the innerHTML, if you have a quotation mark inside of your HTML text, you need to precede it by a slash ( \ ) so that the browser knows it belongs in the string (as opposed to terminating it).

I’ve provided an example below, and you can try it out on JSFiddle: (Note: this is not the end of the post)

<html>
<head>
<style type=”text/css”>
#area
{
position: absolute;
background-color: red;
}
</style>

<script type=”text/javascript”>
function start()
{
var elem = document.createElement( “div” );
elem.innerHTML = “NOT!”;
document.getElementById( “area” ).appendChild( elem );
}

function reset()
{
document.getElementById( “area” ).innerHTML = restore();
//document.getElementById( “area” ).childNodes[1].innerHTML = “”;
}

function restore()
{
var newHTML =
“<button onclick=\”start()\”>Punch this</button><button onclick=\”reset()\”>Reset</button> “;
return newHTML;
}
</script>

</head>

<body>
<div>An example</div>
<div id=”area”>
<button onclick=”start()”>Punch this</button>
<button onclick=”reset()”>Reset</button>
</div>
<button
</body>
</html>

But wait, there’s more!

Suppose we don’t want to type out everything in one line when we want to add it. In that case, it’s easy to just append to the document. You’ll find how to do that here, but the gist is this, utilizing the division I wrote up at the start of this article:

// create a new element you want to insert

var element = document.createElement( “p” );

// creates the tag given in quotes.
// change the contents

element.innerHTML = “Hello world”;

// insert that element into the division, noting that it will come up last

document.getElementById( “somediv” ).append( element );

Or you can remove the element via:

document.getElementById( “somediv” ).removeChild( element );

Advertisements

About chronologicaldot

Just a Christ-centered, train-loving, computer geek.
This entry was posted in software and tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Enter the space and time of my little world... Welcome Earthling.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s