通过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("<input " + input_event_attr_IE + ">") 

    } 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 

}

打开hbuilder软件新建一个html文件，在html页面上创建一个点击的button按钮。然后为button添加点击时创建一个新的div事件。使用“document.createElement()”创建一个新的div，接着使用innerHTML对新建的div设置内容，最后把div放到body显示。在html里为button按钮添加宇哥点击创建div的事件，完成之后代码就写好了，接下来需要看看效果。保存好html文件后使用浏览器打开，此时还没有创建div。最后点击button按钮，会执行脚本创建div的事件，新的div就创建好了，顺利实现了给标签添加了内容。

---