js 用CreateElement动态创建标签示例
2024-05-06 14:33:11
供稿：网友
//定义方法创建一个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;
}
//*************************************//
//定义方法创建input标签（主要为Text）
//id,name,value,type 分别代表创建标签的id,
// 名称（name），值（value），类型（type）
// 绑定Input方法事件，绑定方式如下（可以同时绑定多个事件方法）：
// "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 {//定义变量实现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);
