Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > body text

js uses CreateElement to dynamically create tags example_javascript skills

WBOY
Release： 2016-05-16 17:13:41
Original
1158 people have browsed it

//Define method to create a label
//*************************************//

Copy code The code is as follows:

var createLabel = function(id, name, value) {
var label_var = document.createElement("label");

var label_id = document.createAttribute(" id");
label_id.nodeValue = id;

var label_text = document.createTextNode(value);

label_var.setAttributeNode(label_id);
var label_css = document. createAttribute("class");
label_css.nodeValue = "select_css";
label_var.setAttributeNode(label_css);
label_var.appendChild(label_text);

return label_var;
}

//*************************************//
//Define methods to create input tags (mainly Text)
//id, name, value, type respectively represent creation Tag's id,
// name (name), value (value), type (type)
// Bind the Input method event, the binding method is as follows (multiple event methods can be bound at the same time):
// "onchange==alert('This Value is change success !');|onblur==alert('This value is the beautiful one !');"
//*************************************/ /
Copy code The code is as follows:

var createInput = function(id, name, value, type, width, height, event) {
var var_input = null;
var input_event_attr_IE = "";
if (event != null && event != "") {
var event_array_IE = event .toString().split('|');
for (var i = 0; i < event_array_IE.length; i ) {
var event_IE = event_array_IE[i].split('==') ;
input_event_attr_IE = " " event_IE[0] "='' ";
}
}
try {//Define variables to achieve compatibility with IE6.0 and IE7.0.
var_input = document.createElement("");
} catch (e) {
var_input = document.createElement("input");
}

var input_id = document.createAttribute("id");
input_id.nodeValue = id;
var input_name = document.createAttribute("name");
input_name.nodeValue = name;
var input_type = document.createAttribute("type");
input_type.nodeValue = type;
var input_value = document.createAttribute("value");
input_value.nodeValue = value;
var input_style = document.createAttribute("style");
var input_style_str = "";

if (width != null && width != "") {
input_style_str = "width:" width "px;";
} else {
input_style_str = "width:30px;";
}
if (height != null && height != "") {
input_style_str = "height:" height "px;";
}

if (event != null && event != "") {
var event_array = event.toString().split('| ');
for (var i = 0; i < event_array.length; i ) {
var events = event_array[i].split('==');
var input_event = document. createAttribute(events[0]);
input_event.nodeValue = events[1];
var_input.setAttributeNode(input_event);
}
}

var_input.setAttributeNode(input_type) ;
input_style.nodeValue = input_style_str;
try {
var_input.setAttributeNode(input_style);
} catch (e) {
width = (width == null || width == " ") ? "30" : width;
var_input.setAttribute("width", width);
if (height != null && height != "") {
var_input.setAttribute("height" , height);
}
}
// if (readonly != "") {
// var input_readonly = document.createAttribute("readonly");
// input_readonly. nodeValue = "readonly";
// var_input.setAttributeNode(input_readonly);
// }

var_input.setAttributeNode(input_id);
var_input.setAttributeNode(input_name);
var_input.setAttributeNode(input_value);

return var_input;
}

//******************************************************************************* ****************//
//Define method to create a label for the Select selection box;
//***** id represents the identification id of the label
//***** name represents the name of the label
//***** options represents the options to be bound to the label (for example: "0231A563-Professional Services|02312177-Maintenance Services |...")
//***** splitstr represents the character used to separate options (such as: '|')
//***** splitchar represents the separator that separates key-value pairs ( Such as: '-')
//***** event represents the event corresponding to this tag (when event==null, this tag does not bind events)
//*** id represents the identification id of the label
//***** name represents the name of the label name
//***** options represents the options to be bound to the label (for example: "0231A563- Professional services|02312177-Maintenance services|...") //***** splitstr represents the characters used to separate options (such as: '|') //***** splitchar represents the separator that separates key-value pairs (such as: '-') //***** event represents the event corresponding to this tag (this tag does not bind events when event==null) //************************************************ ********************** ***************************//
<🎜><🎜>Copy code<🎜>< 🎜><🎜> The code is as follows: <🎜>

var createSelect = function(id, name, options, splitstr, splitchar, event, selectedValue) {
var var_select = null;
try {//处理IE6.0和IE7.0的兼容问题。
var_select = document.createElement("