Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Tutorial: How to load webpage dynamically using innerHTML?

innerhtml innerHTML

  • Please log in to reply
6 replies to this topic

#1 Termana

Termana

    CC Devotee

  • Just Joined
  • PipPipPipPipPipPip
  • 971 posts

Posted 15 September 2009 - 05:20 AM

innerHTML allows you to change parts of a web page dynamically. In my last tutorial about GET and POST in PHP, I showed how you could use a button and a textbox and then use GET or POST to print that text on the page. However, to do this, it refreshed the page. Using innerHTML, we will do it without refreshing the page. And, in another tutorial, I’ll be showing how to use ajax and innerHTML to be able to do things like pull information from a database and then use innerHTML to show it. But, on with this tutorial.

Firstly, we need to setup our page with a textbox and a normal button. I have explained some of this in previous tutorials, however, if you do not know how to set these bits up, I suggest you stop and go back over HTML. I have refrained from using a form element, simply because its not needed.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
  <title></title>
</head>
<body>
<input name="name" id="name"><br>
<input name="Submit" value="Submit" type="button">
</body>
</html>

Now, we need to setup the spot where we will put our text. In our javascript code, we will be finding the spot by id, so we need to add an ID to an HTML tag. In this example, we will use a <p> tag with a id of namehere. We’ll also add an onclick event to our button, that will call a (yet to be made) javascript function.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
  <title></title>
</head>
<body>
<p id="namehere"></p>
<input name="name" id="name"><br>
<input name="Submit" value="Submit"
 onclick="javascript:changename()" type="button"></body>
</html>
Now, we need to implement the javascript function. In this function we set the innerHTML property of the namehere id element to “Hello, “ and then add on the value of the name textbox.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
  <title></title>
</head>
<body>
<script type="text/javascript">function changename() { document.getElementById('namehere').innerHTML = "Hello, " + document.getElementById('name').value; } </script>
<p id="namehere"></p>
<input name="name" id="name"><br>
<input name="Submit" value="Submit"
 onclick="javascript:changename()" type="button"></body>
</html>

Run the page, and you’ll find that once you enter a name and press submit, the words “Hello, Whatevernnameyouputin” just above the textbox. I will have a live demo up on my codecall subdomain shortly.

If this tutorial was helpful, please +rep me :amr:
  • 3

Interested in participating in community events?
Want to harness your programming skill and turn it into absolute prowess?
Come join our programming events!


#2 Guest_Jordan_*

Guest_Jordan_*
  • Guest

Posted 15 September 2009 - 08:03 AM

Nice work, Termana. +rep!
  • 0

#3 amrosama

amrosama

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 2765 posts

Posted 17 September 2009 - 02:37 AM

nice tutorial, nice and easy +rep
is that the beginning of JS tutorials by termana?
  • 0
yo homie i heard you like one-line codes so i put a one line code that evals a decrypted one line code that prints "i love one line codes"
eval(base64_decode("cHJpbnQgJ2kgbG92ZSBvbmUtbGluZSBjb2Rlcyc7"));
www.amrosama.com | the unholy methods of javascript

#4 debtboy

debtboy

    CC Devotee

  • Just Joined
  • PipPipPipPipPipPip
  • 499 posts

Posted 17 September 2009 - 06:36 PM

very nice +rep
looking forward to your ajax version
  • 0

#5 Mozana

Mozana

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 70 posts
  • Programming Language:Java, C#, PHP, JavaScript, PL/SQL
  • Learning:Objective-C

Posted 26 March 2012 - 04:37 AM

nyc +rep[COLOR="Silver"]
  • 0

#6 FuturedHosting

FuturedHosting

    CC Lurker

  • New Member
  • Pip
  • 9 posts

Posted 27 September 2015 - 07:44 AM

Excellent stuff. Thanks a lot for this +


  • 0

#7 leon242

leon242

    CC Lurker

  • Just Joined
  • Pip
  • 2 posts

Posted 21 July 2016 - 09:47 AM

Such an interesting article :thumbup1: 


  • 0