js 用CreateElement动态创建标签示例


Posted in Javascript onNovember 20, 2013

//定义方法创建一个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); 
} 
} 
// 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; 
}

//******************************************************************//
//定义方法创建一个Select选择框的标签;
//***** id 表示标签的标识id
//***** name 表示标签的名称name
//***** options表示标签要绑定的选择项(例如:"0231A563-专业类服务|02312177-维保类服务|……")
//***** splitstr表示用来分割options的字符(如:'|')
//***** splitchar表示分割键值对的分隔符(如:'-')
//***** event 表示此标签对应的事件(当event==null时此标签不绑定事件)
//******************************************************************//
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; 
}

//***************************************************//
//定义方法创建一个<a>标签;
//***** id表示标签唯一表示id
//***** name表示标签的名称name
//***** value表示标签对应显示的文字(名称)
//***** event表示标签对应的事件(当event==null时事件不绑定)
//***** href表示标签的链接属性
//***************************************************//
var createA = function(id, name, value, event, href, target) { 
var var_a = null; 
try { 
var_a = document.createElement("<a onclick='' target='_blank'>"); //这里创建必须为"<a onclick='alert()'>"这种形式来创建否者不支持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时判断输入值是否为整数;
//******************************************//
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, ""); 
}
Javascript 相关文章推荐
很多人都是用下面的js刷新站IP和PV
Sep 05 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
JS实现字体选色板实例代码
Nov 20 #Javascript
jquery实现树形二级菜单实例代码
Nov 20 #Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 #Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 #Javascript
js中的布尔运算符使用介绍
Nov 20 #Javascript
浅析hasOwnProperty方法的应用
Nov 20 #Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 #Javascript
You might like
摩卡咖啡
2021/03/03 咖啡文化
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
bootstrap table实例详解
2017/01/06 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
python分割列表(list)的方法示例
2017/05/07 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
Python 从相对路径下import的方法
2018/12/04 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
python异步Web框架sanic的实现
2020/04/27 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
保安部任务及岗位职责
2014/02/25 职场文书
创建文明城市标语
2014/06/16 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
销售业务员岗位职责
2015/02/13 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫