Total Pageviews

Monday, 3 November 2014

Using Javascript to Create HTML Elements

JavaScript is a lightweight, interpreted programming language with object-oriented capabilities that allows you to build interactivity into otherwise static HTML pages.
Here we have used javascript in templates to create html elements such as form ,textarea ,buttons.
Firstly ,Lets create form ,using document.createElement("form") and set its attribute like method which decides the http methods to be used and action of the form which directs us to any required page on submitting the form.
var f = document.createElement("form");
f.setAttribute('method',"get");
f.setAttribute('action',"/ans/");
Lets create some html elements like textarea and button and later append it to the form.
The below snippet is for creation of textarea,and setting its attribute like id,number of columns,rows,placeholder etc..
var i = document.createElement("textarea");
i.setAttribute('id',"textbox");
i.setAttribute('name',"textbox");
i.setAttribute('cols',"60");
i.setAttribute('rows',"10");
i.setAttribute('placeholder',"Post your Answer here...");
The below snippet is for creation of submit button,and setting its attribute like id,type,value etc..
var s = document.createElement("input");
s.setAttribute('type',"submit");
s.setAttribute('value',clicked_id);
s.setAttribute('id','clicked_id');
s.setAttribute('name','clicked_id');
So,lets append altogether in a form using the appendChild() where i and s are textarea ,button and f is the form where all the html elements are appended to.
f.appendChild(i);
f.appendChild(s);

No comments:

Post a Comment