js 用CreateElement动态创建标签示例

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

(0)

相关推荐

  • JSP自定义标签Taglib实现过程重点总结

    Taglib指令介绍 Taglib指令,其实就是定义一个标签库以及自定义标签的前缀. 比如struts中支持的标签库,html标签库.bean标签库.logic标签库. 其中的具体的实现方式,我们不过多介绍,我们给大家从宏观的角度以及解决其中的疑难点,后面会大家介绍相应的学习资料. 除了struts的标签库,我们常见还有jstl标签库. 这样在界面jsp中引入其中的标签库或者标签库文件,然后才可以正常使用其中定义的标签. 复制代码 代码如下: <%@ taglib prefix ="bea

  • jsp 定制标签(Custom Tag)

    怎样自己定制标签(Custom Tag) (整理的学习笔记) 步骤1.创建一个Tag handler class(标记处理器类) package javax.servlet.jsp.tagext 开发空Body的标签处理器类----->1)implements Tag 2)extends TagSupport 空Body的标签处理器类需要覆盖方法: doStartTag() 返回值:Tag.SKIP_BODY doEndTag() 返回值: 1)Tag.EVAL_PAGE:让标签下面的内容继续执

  • 浅析JS动态创建元素【两种方法】

    前言: 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态创建元素(创建元素 => 找到父级元素 => 在指定位置插入元素) 一.字符串拼接形式 为了更好的理解,设定一个应用场景. 随机生成一组数字,将这组数据渲染为条形图的形式,放在div[id="container"]中,如下图 <div id="containe

  • JS中动态创建元素的三种方法总结(推荐)

    1.动态创建元素一 document.write() 例如向页面中输出一个 li 标签 <pre class="html" name="code"><span style="font-size:12px;"><script> document.write("<li>123</li>"); </script></span> body标签中就会插入

  • JS 创建对象(常见的几种方法)

    贴个代码先: function O(user,pwd){ //use constructor this.user=user; this.pwd=pwd; this.get=get; return this; } function O2(user,pwd){ //use factory var obj=new Object(); obj.user=user; obj.pwd=pwd; obj.get=get; return obj; } function O3(){ //use prototype

  • js实现创建删除html元素小结

    如果我要创建一个div元素. 1.使用DOM对象创建: 使用document.createElement('div')方法创建元素. 2.使用JQuery创建: 使用$('<div>通过JQuery创建的新元素</div>')的方法直接创建元素. 如果需要将id是'div2js'的div元素删除. 1.使用DOM对象 首先需要找到被删元素的父元素,通过父元素将其需要删除的子元素删除. var el = document.getElementById('div2js'); el.pa

  • JS动态创建DOM元素的方法

    本文实例讲述了JS动态创建DOM元素的方法.分享给大家供大家参考.具体如下: 近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /* 动态创建DOM元素的相关函数支持 */ /* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; }

  • JS创建Tag标签的方法详解

    本文实例讲述了JS创建Tag标签的方法.分享给大家供大家参考,具体如下: 一 . 创建标签其原理就是 创建一个节点: var x = document.createElement("TagName") 赋予节点样式: x.setAttribute("class",类名) 对节点进行赋值: x.innerHTML = 内容 //赋值 添加节点到父元素 要添加到的元素.appendChild(x); 二. 样式图: 三. 主要代码流程: HTML部分: <div

  • JavaScript 三种创建对象的方法

    JavaScript中对象的创建有以下几种方式: (1)使用内置对象 (2)使用JSON符号 (3)自定义对象构造 一.使用内置对象 JavaScript可用的内置对象可分为两种: 1,JavaScript语言原生对象(语言级对象),如String.Object.Function等: 2,JavaScript运行期的宿主对象(环境宿主级对象),如window.document.body等. 我们所说的使用内置对象,是指通过JavaScript语言原生对象的构造方法,实例化出一个新的对象.如: 复

  • JSP自定义分页标签TAG全过程

    首先我们需要在WEB-INF/tld/目录下创建page.tld文件 <?xml version="1.0" encoding="ISO-8859-1"?> <taglib> <tlib-version>1.0</tlib-version> <jsp-version>1.2</jsp-version> <short-name>page</short-name> <u

  • javascript转换字符串为dom对象(字符串动态创建dom)

    前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createElement('div'); 然后再给obj设置一些属性. 但是,在实际使用过程中,有些人可能会想,要是能这样创建标准的dom对象就好了 伪代码:var obj=strToDom('<div id="div_1" class="div1">Hello World!</div>'); 那么今天的目的就是教大家怎么去实现一个这样

  • Js动态创建div

    这是原来的CSS样式 .item{float:left;overflow:hidden;margin-left:8px;margin-top:10px;width: 320px; height: 250px;background-repeat: no-repeat; background-image:url(../images/bgred.jpg)} .curve{position:relative;width:320px; height:250px; z-index:1; left: 75px

随机推荐