快捷導(dǎo)航

js 用CreateElement動態(tài)創(chuàng)建標簽示例

更新時間：2013年11月20日 15:32:17 作者：

用CreateElement動態(tài)創(chuàng)建標簽，主要是html中常用的一些標簽，在本文有詳細的示例，喜歡的朋友可以參考下

//定義方法創(chuàng)建一個label標簽
//*************************************//

 
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標簽（主要為Text）
//id,name,value,type 分別代表創(chuàng)建標簽的id,
// 名稱（name），值（value），類型（type）
// 綁定Input方法事件，綁定方式如下（可以同時綁定多個事件方法）：
// "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 {//定義變量實現(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)建一個Select選擇框的標簽；
//***** id 表示標簽的標識id
//***** name 表示標簽的名稱name
//***** options表示標簽要綁定的選擇項（例如："0231A563-專業(yè)類服務(wù)|02312177-維保類服務(wù)|……")
//***** splitstr表示用來分割options的字符（如：'|')
//***** splitchar表示分割鍵值對的分隔符（如：'-'）
//***** event 表示此標簽對應(yīng)的事件（當event==null時此標簽不綁定事件）
//******************************************************************//

復(fù)制代碼代碼如下:

 
var createSelect = function(id, name, options, splitstr, splitchar, event, selectedValue) { 
var var_select = null; 
try {//處理IE6.0和IE7.0的兼容問題。 
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)建一個<a>標簽；
//***** id表示標簽唯一表示id
//***** name表示標簽的名稱name
//***** value表示標簽對應(yīng)顯示的文字（名稱）
//***** event表示標簽對應(yīng)的事件（當event==null時事件不綁定）
//***** href表示標簽的鏈接屬性
//***************************************************//

復(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()'>"這種形式來創(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); //注意這個值綁定順序，只能放在最后去綁定（不然不支持IE6.0和IE7.0） 

return var_a; 
} 

//******************************************//
//定義方法判斷輸入值是否為數(shù)字；
//******* 當flag=true時判斷輸入值是否為整數(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é)點。 
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, ""); 
} 