Share on Google+Share on Google+

JavaScript getElementById div

This page discusses - JavaScript getElementById div

JavaScript getElementById div


In JavaScript we can get access to any node by using the method document.getElementById(). This method is very important for the JavaScript and is the entry point of the DOM (Document Object Model) scripting. Here in the following example we have used document.getElementById() method to get access to a div element.

Description of code :

This example illustrates the use of getElementById() method on a div element. We have created a div with the id "myDiv", a button named "Move text to div" and one text field. Button when clicked it moves the input text field value to the div. When we click on the button it calls the user defined function sendText(). Defined function is as follows :

 function sendText() {
	var txtValue = document.getElementById('txt').value;
	document.getElementById('myDiv').innerText = txtValue;

First line of the function gets the input text field value into a variable "txtValue" and in the second line we have placed this received text value to the div content by applying the innerText property over the "div" reference.

Full example code of getElementByIdDiv.html is as follows :

      getElementById Div example
     <script language="javascript" >
      function sendText() {
	var txtValue = document.getElementById('txt').value;
	document.getElementById('myDiv').innerText = txtValue;
     <div style="background: #DFDFFF; width:'100%';" align="center">
       <font color="#000080" size="12pt">
	<b>getElementById in &lt;div&gt;</b>
	<div id="myDiv" style="background:#ffffdd; height:100px;">
	<input type="text" id="txt" size="55">
	<input type="button" value="Move text to div" 
             onClick="sendText();" />

Output :

Output would be like as given above. Now input some text into text field to set it into div.

Click on the button "Move text to div"

Download Source Code



Posted on: April 18, 2011 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Discuss: JavaScript getElementById div  

Post your Comment

Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image