Create HTML Element and there attributes in JavaScript

Here, I’m going to share how to create all HTML elements and there attributes.

//Create Input Text
var ele = document.createElement(“input”);
ele.type = “text”;
ele.className = “form-control form-build”;

//Create Input Type Number
var ele = document.createElement(“input”);
ele.type = “number”;
ele.className = “form-control form-build”;

//Create Input Type Checkbox
var ele = document.createElement(“input”);
ele.type = “checkbox”;
ele.className = “form-control form-build”;

//Create Input Type Radio
var ele = document.createElement(“input”);
ele.type = “radio”;
ele.className = “form-control form-build”;

//Create Input Type File
var ele = document.createElement(“input”);
ele.type = “file”;
ele.className = “form-control form-build”;

//Create Input Type Select
var choices = [“option1″,”option2”];
var ele = document.createElement(‘select’);
ele.className = “form-control form-build”;
ele.options[0] = new Option(“Please select”,”0″);
for(var i=1;i<choices.length+1;i++){
ele.options[i] = new Option(choices[i-1],choices[i-1]);
}

//Create Input Type Multi Select
var choices = [“option1″,”option2”];
var ele = document.createElement(‘select’);
ele.className = “form-control form-build”;
ele.options[0] = new Option(“Please select”,”0″);
for(var i=1;i<choices.length+1;i++){
ele.options[i] = new Option(choices[i-1],choices[i-1]);
}

//Create Button
var ele = document.createElement(‘button’);
ele.innerHTML= “button”;

You can create same all HTML element and there attributes as given above examples and if you want any help related to JavaScript or any other Js please comment me.

Related article- JavaScript: Create Dynamic HTML Select Box element and there options

News Reporter
IT Software and web development, Core PHP, JavaScript, JQuery, HTML, CSS, CakePHP, Angularjs, Codeigniter etc.

Leave a Reply

Your email address will not be published. Required fields are marked *

error: