1、获取div节点
var div = document.getElementById('divid')//获取一个id是divid的div节点，往这个节点中添加p节点2、动态生成p节点
var p = document.createElement('p')//创建p节点p.innerHTML = '显示的文字'//p节点显示的文字
3、往div中通过appendChild添加p节点
div.appendChild(p)//往div中添加p节点关于你的提问，我通过添加一个Input标签实现的，代码如下：<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function keydownAddP(evt) { // 当input标签接收到回车时，执行本方法
evt = (evt) ? evt : ((window.event) ? window.event : "")
keyCode = evt.keyCode ? evt.keyCode : (evt.which ? evt.which : evt.charCode)
if (keyCode == 13) {
//创建一个P标签
var newP = document.createElement('p')
newP.innerHTML = "新的P标签"
//添加新P标签
var con = document.getElementById('con')
con.appendChild(newP)
}
}
</script>
</head>
<body>
<input onkeydown="keydownAddP(event)" type="text" />
<hr />
<div id="con" style="border:1px solid redwidth:500pxheight:300px">
<p>原来的P标签</p>
</div>
</body>
</html>
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
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）