js uses CreateElement to dynamically create tags example_javascript skills

//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("");
} 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;
}

//***************************************************//
//定义方法创建一个标签；
//***** id表示标签唯一表示id
//***** name表示标签的名称name
//***** value表示标签对应显示的文字（名称）
//***** event表示标签对应的事件（当event==null时事件不绑定）
//***** href表示标签的链接属性
//*** id represents the unique id of the label
//***** name represents the name of the label name

//***** value represents the text (name) displayed corresponding to the label // ***** event represents the event corresponding to the label (the event is not bound when event==null) //***** href represents the link attribute of the label //****** ************************************************//

复制代码


代码如下:


var createA = function(id, name, value, event, href, target) {
var var_a = null;
try {
var_a = document.createElement(""); //这里创建必须为""这种形式来创建否者不支持IE6.0和IE7.0
} catch (e) {
var_a = document.createElement("a");
}
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); //注意这个值绑定顺序，只能放在最后去绑定（不然不支持IE6.0和IE7.0）

return var_a;
}

//******************************************// //定义方法判断输入值是否为数字； //******* 当flag=true时判断输入值是否为整数； //***** When flag=true, determine whether the input value is an integer; //****************************** ****************//

复制代码 代码如下:

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;
}

//定义方法删除节点。
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, "");
}

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A brief discussion on some operations of checkbox (practical experience)_Basic knowledgeNext article：A brief discussion on some operations of checkbox (practical experience)_Basic knowledge

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved