通过JavaScript添加标签

通过JavaScript添加标签

JavaScript可以通过CreateElement方法动态创建标签，具体示例如下：
示例1：定义方法创建一个label标签 
 
var createLabel = function(id, name, value) { 
    //新建lable标签
    var label_var = document.createElement("label"); 
    //新建id属性
    var label_id = document.createAttribute("id"); 
    label_id.nodeValue = id; 
    //新建文本节点
    var label_text = document.createTextNode(value); 
    //为label标签添加属性和文本
    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; 
}示例2：定义方法创建input标签（主要为Text），并为标签添加id,name,value,type 属性，并绑定事件
 
var createInput = function(id, name, value, type, width, height, event) { 
    var var_input = null; 
    var input_event_attr_IE = "";
    //event表示希望绑定的事件，可能是多个，如果为多个，则拆分一下 
    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(""); 
    } catch (e) { 
        var_input = document.createElement("input"); 
    } 
    //定义id、name、type、value和style属性
    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); 
        } 
    } 
    //为标签添加属性
    var_input.setAttributeNode(input_id); 
    var_input.setAttributeNode(input_name); 
    var_input.setAttributeNode(input_value); 
    
    return var_input; 
}

不错啊，都做到描红操作了，已经很专业了
我说两句：

X这中间一定是变量输出的如X，
对X进行字符串操作，可以用正则表达式，也可以不用
找到对应文字把样式替换即可

可以给你一个别的思路，把你需要显示东西，放一个div里面，开始时候div不显示，有数据时，把div显示出来，就达到你的效果了，有什么问题，可以探讨一下。

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息