js 用CreateElement動(dòng)態(tài)創(chuàng)建標(biāo)簽示例
更新時(shí)間:2013年11月20日 15:32:17 作者:
用CreateElement動(dòng)態(tài)創(chuàng)建標(biāo)簽,主要是html中常用的一些標(biāo)簽,在本文有詳細(xì)的示例,喜歡的朋友可以參考下
//定義方法創(chuàng)建一個(gè)label標(biāo)簽
//*************************************//
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;
}
//*************************************//
//定義方法創(chuàng)建input標(biāo)簽(主要為Text)
//id,name,value,type 分別代表創(chuàng)建標(biāo)簽的id,
// 名稱(name),值(value),類型(type)
// 綁定Input方法事件,綁定方式如下(可以同時(shí)綁定多個(gè)事件方法):
// "onchange==alert('This Value is change success !');|onblur==alert('This value is the beautiful one !');"
//*************************************//
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 {//定義變量實(shí)現(xiàn)IE6.0和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;
}
//******************************************************************//
//定義方法創(chuàng)建一個(gè)Select選擇框的標(biāo)簽;
//***** id 表示標(biāo)簽的標(biāo)識(shí)id
//***** name 表示標(biāo)簽的名稱name
//***** options表示標(biāo)簽要綁定的選擇項(xiàng)(例如:"0231A563-專業(yè)類服務(wù)|02312177-維保類服務(wù)|……")
//***** splitstr表示用來(lái)分割options的字符(如:'|')
//***** splitchar表示分割鍵值對(duì)的分隔符(如:'-')
//***** event 表示此標(biāo)簽對(duì)應(yīng)的事件(當(dāng)event==null時(shí)此標(biāo)簽不綁定事件)
//******************************************************************//
var createSelect = function(id, name, options, splitstr, splitchar, event, selectedValue) {
var var_select = null;
try {//處理IE6.0和IE7.0的兼容問(wèn)題。
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;
}
//***************************************************//
//定義方法創(chuàng)建一個(gè)<a>標(biāo)簽;
//***** id表示標(biāo)簽唯一表示id
//***** name表示標(biāo)簽的名稱name
//***** value表示標(biāo)簽對(duì)應(yīng)顯示的文字(名稱)
//***** event表示標(biāo)簽對(duì)應(yīng)的事件(當(dāng)event==null時(shí)事件不綁定)
//***** href表示標(biāo)簽的鏈接屬性
//***************************************************//
var createA = function(id, name, value, event, href, target) {
var var_a = null;
try {
var_a = document.createElement("<a onclick='' target='_blank'>"); //這里創(chuàng)建必須為"<a onclick='alert()'>"這種形式來(lái)創(chuàng)建否者不支持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); //注意這個(gè)值綁定順序,只能放在最后去綁定(不然不支持IE6.0和IE7.0)
return var_a;
}
//******************************************//
//定義方法判斷輸入值是否為數(shù)字;
//******* 當(dāng)flag=true時(shí)判斷輸入值是否為整數(shù);
//******************************************//
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;
}
//定義方法刪除節(jié)點(diǎn)。
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, "");
}
//*************************************//
復(fù)制代碼 代碼如下:
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;
}
//*************************************//
//定義方法創(chuàng)建input標(biāo)簽(主要為Text)
//id,name,value,type 分別代表創(chuàng)建標(biāo)簽的id,
// 名稱(name),值(value),類型(type)
// 綁定Input方法事件,綁定方式如下(可以同時(shí)綁定多個(gè)事件方法):
// "onchange==alert('This Value is change success !');|onblur==alert('This value is the beautiful one !');"
//*************************************//
復(fù)制代碼 代碼如下:
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 {//定義變量實(shí)現(xiàn)IE6.0和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;
}
//******************************************************************//
//定義方法創(chuàng)建一個(gè)Select選擇框的標(biāo)簽;
//***** id 表示標(biāo)簽的標(biāo)識(shí)id
//***** name 表示標(biāo)簽的名稱name
//***** options表示標(biāo)簽要綁定的選擇項(xiàng)(例如:"0231A563-專業(yè)類服務(wù)|02312177-維保類服務(wù)|……")
//***** splitstr表示用來(lái)分割options的字符(如:'|')
//***** splitchar表示分割鍵值對(duì)的分隔符(如:'-')
//***** event 表示此標(biāo)簽對(duì)應(yīng)的事件(當(dāng)event==null時(shí)此標(biāo)簽不綁定事件)
//******************************************************************//
復(fù)制代碼 代碼如下:
var createSelect = function(id, name, options, splitstr, splitchar, event, selectedValue) {
var var_select = null;
try {//處理IE6.0和IE7.0的兼容問(wèn)題。
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;
}
//***************************************************//
//定義方法創(chuàng)建一個(gè)<a>標(biāo)簽;
//***** id表示標(biāo)簽唯一表示id
//***** name表示標(biāo)簽的名稱name
//***** value表示標(biāo)簽對(duì)應(yīng)顯示的文字(名稱)
//***** event表示標(biāo)簽對(duì)應(yīng)的事件(當(dāng)event==null時(shí)事件不綁定)
//***** href表示標(biāo)簽的鏈接屬性
//***************************************************//
復(fù)制代碼 代碼如下:
var createA = function(id, name, value, event, href, target) {
var var_a = null;
try {
var_a = document.createElement("<a onclick='' target='_blank'>"); //這里創(chuàng)建必須為"<a onclick='alert()'>"這種形式來(lái)創(chuàng)建否者不支持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); //注意這個(gè)值綁定順序,只能放在最后去綁定(不然不支持IE6.0和IE7.0)
return var_a;
}
//******************************************//
//定義方法判斷輸入值是否為數(shù)字;
//******* 當(dāng)flag=true時(shí)判斷輸入值是否為整數(shù);
//******************************************//
復(fù)制代碼 代碼如下:
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;
}
//定義方法刪除節(jié)點(diǎn)。
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, "");
}
您可能感興趣的文章:
- JSP自定義分頁(yè)標(biāo)簽TAG全過(guò)程
- JSP自定義標(biāo)簽Taglib實(shí)現(xiàn)過(guò)程重點(diǎn)總結(jié)
- jsp 定制標(biāo)簽(Custom Tag)
- JS 創(chuàng)建對(duì)象(常見的幾種方法)
- JavaScript 三種創(chuàng)建對(duì)象的方法
- Js動(dòng)態(tài)創(chuàng)建div
- js實(shí)現(xiàn)創(chuàng)建刪除html元素小結(jié)
- javascript轉(zhuǎn)換字符串為dom對(duì)象(字符串動(dòng)態(tài)創(chuàng)建dom)
- JS動(dòng)態(tài)創(chuàng)建DOM元素的方法
- JS中動(dòng)態(tài)創(chuàng)建元素的三種方法總結(jié)(推薦)
- 淺析JS動(dòng)態(tài)創(chuàng)建元素【兩種方法】
- JS創(chuàng)建Tag標(biāo)簽的方法詳解
相關(guān)文章
編寫js擴(kuò)展方法判斷一個(gè)數(shù)組中是否包含某個(gè)元素
判斷集合是否包含某個(gè)元素我們可以利用js的原型擴(kuò)展來(lái)封裝一個(gè)我們自己的Contains方法,具體思路及實(shí)現(xiàn)如下,感興趣的朋友可以參考下2013-11-11js substr、substring和slice使用說(shuō)明小記
關(guān)于substr、substring和slice方法區(qū)別的文章,網(wǎng)上搜到了許多,文章內(nèi)容也基本一致。而后,我將其中一篇文章中的代碼挪到本地進(jìn)行了測(cè)試,發(fā)現(xiàn)測(cè)試結(jié)果和原文中的有些出入。2011-09-09ElementUI的Dialog彈窗實(shí)現(xiàn)拖拽移動(dòng)功能示例代碼
這篇文章主要介紹了ElementUI的Dialog彈窗實(shí)現(xiàn)拖拽移動(dòng)功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07JavaScript HTML DOM 元素 (節(jié)點(diǎn))新增,編輯,刪除操作實(shí)例分析
這篇文章主要介紹了JavaScript HTML DOM 元素 (節(jié)點(diǎn))新增,編輯,刪除操作,結(jié)合實(shí)例形式分析了JavaScript針對(duì)HTML DOM 元素 (節(jié)點(diǎn))的新增,編輯,刪除相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2020-03-03利用types增強(qiáng)vscode中js代碼提示功能詳解
這篇文章主要給大家介紹了如何增強(qiáng)vscode中js代碼提示功能的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2017-07-07JS request函數(shù) 用來(lái)獲取url參數(shù)
項(xiàng)目中經(jīng)常會(huì)遇到這種問(wèn)題 下面代碼解決問(wèn)題!2010-05-05