通过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 

}

给你个参考：

var newStyle = document.createElement('style')

newStyle.appendChild(document.createTextNode("\

@font-face {\

font-family: '" + yourFontName + "'\

src: url('" + yourFontURL + "') format(yourFontFormat)\

}\

"))

document.head.appendChild(newStyle)

获取的页面元素，就可以对页面元素的属性进行 *** 作，属性的 *** 作包括属性的读和写。

*** 作属性的方法 

1、“.” *** 作

2、“[ ]” *** 作

属性写法

1、html的属性和js里面属性写法一样

2、“class” 属性写成 “className”

3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

js *** 作属性

《script type=text/javascript》

widow。onload = function（）{  全部加载渲染完之后才执行下一步

  document。getElementById（div1）。title= 我看到了；

《/script》

《body》

  《div id = div1 class = div1 title = 这是一个div元素，你看到了吗？》

《/body》

在js中有类似font-size这类似的系统回默认为-号，可以用小驼峰  fontSize写法

class属性

需要在class后面加Name

中括号

需要在变量加上中括号。[color]写法

style的写法['style']

  document。write 只能重绘整个页面

innerhtml 可以重绘页面的一部分。

---