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
}
代码如下，只能输入五个，请运行检测<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcha rset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
a.blue:link,a.blue:visited{
font-size: 12px
color: #69c
text-decoration: none
}
a.blue:hover{
background: #69c
color: #fff
}
</style>
<script type="text/javascript">
var num = 0
function fInsert(a,b){
oInput = document.getElementById(a)
oItm = b
// alert(b.style.backgroundColor)
if((b.style.backgroundColor == "#6699cc")||(b.style.backgroundColor)){
sReplace = oItm.innerHTML.concat(" ")
oInput.value = oInput.value.replace(sReplace,"")
b.style.backgroundColor = ""
b.style.color = ""
num--
}else{
num++
if(num>5){
num--
return
}
oInput.value = oInput.value.concat(oItm.innerHTML)
oInput.value = oInput.value.concat(" ")
b.style.backgroundColor = "#69c"
b.style.color = "#fff"
}
}
</script>
</head>
<body>
<input type="text" id="cc" style=" width: 300px" />
<a href="javascript:void(0)" class="blue" onclick="fInsert('cc',this)">关键字</a><a href="javascript:void(0)" class="blue" onclick="fInsert('cc',this)">关键字2</a><a href="javascript:void(0)" class="blue" onclick="fInsert('cc',this)">关键字3</a><a href="javascript:void(0)" class="blue" onclick="fInsert('cc',this)">关键字4</a><a href="javascript:void(0)" class="blue" onclick="fInsert('cc',this)">关键字5</a><a href="javascript:void(0)" class="blue" onclick="fInsert('cc',this)">关键字6</a>
</body>
</html>
给你个参考：var newStyle = document.createElement('style')
newStyle.appendChild(document.createTextNode("\
@font-face {\
font-family: '" + yourFontName + "'\
src: url('" + yourFontURL + "') format(yourFontFormat)\
}\
"))
document.head.appendChild(newStyle)
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）