如何通过javascript动态添加标签?_IT百科

可以直接用document.getElementById("divid").innerHTML = "<p>内容</p>"的方式来写。

多个可以循环进行处理。

假设段落文本是个数组：array。

可以通过for (var i = 0i <array.lengthi++) {document.getElementById("divid").innerHTML = "<p>"+array[i]+"</p>"}的方式进行处理。

延展：

如果段落过多,直接使用 div.appendChild方法会不段刷老指新DIV对象,影响运行速度。

正确的方法应该使用 document对象的碎片方法。

document.createDocumentFragment 容器,最后再将这些碎片返回给DIV对象比较合理，例如:

var strArrayList=[]// 创建一个段落文本数组对象，这些段落文本汪含庆可能是100个也可能是1000个。

strArrayList[0]='数据111.......'

strArrayList[1]='数据.......'

strArrayList[2]='数据.......'

strArrayList[3]='数据.......'

strArrayList[4]='数据.......'

//...数据n.....

var div=document.getElementById('div1')//获得DIV对象。

var f=document.createDocumentFragment()//创建碎片对象。

for(var i=0i<strArrayList.lengthi++){

var p=document.createElement('P')//动态创建P标签。

p.appendChild(document.createTextNode(strArrayList[i]))//段落字符串。

f.appendChild(p)//附加到碎片对象中。

}

div.appendChild(f)//最后返给DIV对象困握。

关于你的提问，我通过添加一个Input标签实现的，代码如下：

<html xmlns="

<head>

<title>无标题文档</title>

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>

<hr />

<p>原来的P标签</p>

</div>

</body>

</html>

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节点

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/bake/11974491.html

如何通过javascript动态添加标签?

发表评论

评论列表（0条）