Example of dynamically creating a tag using CreateElement in js

// Create a label by defining the Method
//*************************************//
Copy codeThe 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 a method to create an input tag (mainly Text)
// Id, name, value, and type represent the id of the created tag,
// Name, value, type)
// Bind the Input method event. The binding method is as follows (multiple event methods can be bound simultaneously ):
// "Onchange = alert ('this Value is change success! '); | Onblur = alert ('this value is the beautiful one! ');"
//*************************************//
Copy codeThe 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 ensure compatibility between IE6.0 and IE7.0.
Var_input = document. createElement ("<input" + input_event_attr_IE + "> ");
} 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 a method to create a Select box label;
// ***** Id indicates the tag id
// ***** Name indicates the name of the tag
// ***** Options indicates the option to bind the tag (for example, "0231A563-Professional Services | 02312177-maintenance services | ...... ")
// ***** Splitstr indicates the character used to separate options (for example, '| ')
// ***** Splitchar indicates the delimiter used to separate key-value pairs (for example :'-')
// ***** Event indicates the event corresponding to this tag (when event = null, this tag is not bound to an event)
//************************************** ****************************//
Copy codeThe Code is as follows:
Var createSelect = function (id, name, options, splitstr, splitchar, event, selectedValue ){
Var var_select = null;
Try {// handle IE6.0 and IE7.0 compatibility issues.
Var_select = document. createElement ("<select onchange =''> ");
} Catch (e ){
Var_select = document. createElement ("select ");
}

Var select_id = document. createAttribute ("id ");
Select_id.nodeValue = id;
Var select_name = document. createAttribute ("name ");
Select_name.nodeValue = name;

If (event! = Null & event! = Undefined & event! = ""){
Var select_change = document. createAttribute ("onchange ");
Select_change.nodeValue = event;
Var_select.setAttributeNode (select_change );
}
Var_select.setAttributeNode (select_id );
Var_select.setAttributeNode (select_name );
Try {
Var_select.setAttribute ("width", "100px ");
} Catch (e ){
Var select_css = document. createAttribute ("class ");
Select_css.nodeValue = "select_css ";
Var_select.setAttributeNode (select_css );
}

Splitstr = (splitstr = "" | splitstr = null )? "|": Splitstr;
Splitchar = (splitchar = "" | splitchar = null )? "-": Splitchar;

If (options! = Null & options! = Undefined & options. toString ()! = ""){
Options = (options. toString (). lastIndexOf (splitstr) + 1 = options. toString (). length )? Options. toString (). substr (0, options. toString (). length-1): options;
Var arrayOption = options. toString (). split (splitstr );
For (var I = 0; I <arrayOption. length; I ++ ){
Var temp_value = arrayOption [I]. split (splitchar );
Var option = document. createElement ("option ");
Var option_value = document. createAttribute ("value ");
Option_value.nodeValue = temp_value [0];
Var option_text = document. createTextNode (temp_value [1]);
Option. setAttributeNode (option_value );
Option. appendChild (option_text );

Var_select.appendChild (option );
If (selectedValue! = Null & selectedValue! = ""){
If (temp_value [0] = selectedValue | temp_value [1] = selectedValue ){
Var_select.options [I]. selected = true;
}
}
}
}
Return var_select;
}

//************************************** *************//
// Define a method to create a <a> label;
// ***** Id indicates the unique id of a tag
// ***** Name indicates the name of the tag
// ***** Value indicates the text (name) displayed for the label)
// ***** Event indicates the event corresponding to the tag (when event = null, the event is not bound)
// ***** Href indicates the link property of the tag.
//************************************** *************//
Copy codeThe Code is as follows:
Var createA = function (id, name, value, event, href, target ){
Var var_a = null;
Try {
Var_a = document. createElement ("<a onclick = ''target = '_ blank'>"); // The value must be "<a onclick = 'alert () '> "this method does not support IE6.0 or IE7.0.
} Catch (e ){
Var_a = document. createElement ("");
}
Var a_id = document. createAttribute ("id ");
A_id.nodeValue = id;
Var a_name = document. createAttribute ("name ");
A_name.nodeValue = name;
Href = (href = null | href = "")? ("Javascript: void (0);" | "#"): href;
Var a_href = document. createAttribute ("href ");
A_href.nodeValue = href;

Var a_Text = document. createTextNode (value );

Var_a.setAttributeNode (a_href );
Var_a.setAttributeNode (a_id );
Var_a.setAttributeNode (a_name );
If (target! = Null ){
Var target_href = document. createAttribute ("target ");
Target_href.nodeValue = "_ blank ";
Var_a.setAttributeNode (target_href );
}

If (event! = "" & Event! = Null & event! = Undefined ){
Var a_click = document. createAttribute ("onclick ");
A_click.nodeValue = event;
Var_a.setAttributeNode (a_click );
}
Var_a.appendChild (a_Text); // note the order of binding this value. It can only be placed at the end of the binding (otherwise, IE6.0 and IE7.0 are not supported)

Return var_a;
}

//************************************** ****//
// Define the method to determine whether the input value is a number;
// ******* When flag = true, judge whether the input value is an integer;
//************************************** ****//
Copy codeThe Code is as follows:
Var check_Is_Num = function (obj, flag ){
Var flag_var = false;
Var num =/^ \ d + $/; // ^ \ +? [1-9] [0-9] * $ /;
// Flag_var =/^ ([0-9] + \. [0-9] * [1-9] [0-9] *) | ([0-9] * [1-9] [0-9] * \. [0-9] +) | ([0-9] * [1-9] [0-9] *) $ /. test (obj );
Flag_var =/^ \ d + (\. \ d + )? $/. Test (obj );
If (flag ){
Flag_var = num. test (obj );
}
Return flag_var;
}

// Define a method to delete a node.
Var removeRowItem = function (obj ){
Var rowTr = obj. parentNode. parentNode;
Try {
RowTr. removeNode (true );
} Catch (e ){
RowTr. parentNode. removeChild (rowTr );
}
}

String. prototype. Trim = function (){
Return this. replace (/(^ \ s *) | (\ s * $)/g ,"");
}