Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Javascript JavaScript method createElement()

Related Tutorials


 
 

Share on Google+Share on Google+

JavaScript method createElement()

Advertisement
This section illustrates you the use of JavaScript method createElement().

JavaScript method createElement()

     

This section illustrates you the use of JavaScript method createElement(). This method creates an instance of the element for the specified tag. It works only on Internet Explorer. In the given example, we let the user enter the name. As the user clicks the button, the name will get added to the specified table. Following code adds the text (i.e. entered name) into the container (i.e. table).

element2.appendChild(text);
element1.appendChild(element2); 
table.tBodies(0).appendChild(element1);

 

 

 

Here is the code:

<html>
<script>
function addValue(a) {
var element1 = document.createElement('tr');
var element2 = document.createElement('td');
var text = document.createTextNode(a);
var table = document.getElementById('t');
element2.appendChild(text);
element1.appendChild(element2); 
table.tBodies(0).appendChild(element1);
}
</script>
Name: <input type="text" name="a">
<input type="button" value="Add" onClick='javascript:addValue(a.value)'>
<table id="t" border="1">
<tr><th>Employee Name</th></tr>
</table>
</html>

Output will be displayed as:

As you enter the name and click the button, the entered name will get added to the table:

Download Source Code:

     

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  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.

Posted on: June 13, 2009

Related Tutorials

Discuss: JavaScript method createElement()  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:5
1bung100
September 30, 2011
Replace name attribute with id attribute

This code works only if i replace the 'name' attribute in the input tag with the attribute 'id'
1bung100
September 30, 2011
changing tBodies(0) to tBodies[0]

By changing the attribute name='a' to id='a', this code works in Safari. But so as to work on mozilla firefox i changed tBodies(0) to tBodies[0] and also i included the tag <tbody> as: <table id="t" border="1"> <tbody> <tr><th>Employee Name</th></tr> </tody> </table>
peter gade
October 10, 2011
comment

a very good example
saeb panahifar
May 12, 2012
Tanks

tank you for this text
Naved Ahmed
June 20, 2012
Error

I've got this error: Timestamp: 20/06/12 5:00:32 PM Error: The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol. Source File: http://localhost/workspace/createElement.html Line: 0
DMCA.com