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

如何通过javascript动态添加标签?,第1张

可以直接用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对象。

首先HTML部分如下

因为我这里标签对应的内容是引入的组件,所以我把我要传给组件的参数用:rjKingSettingHandleInfo="item.content"传过去,这里建议要看一下组件引用的知识点了

声明数组和变量

添加和删除的方法

功能要求,判断是否已经打开页面,已经打开的就不再重复打开

该判断放在需要的地方,就是打开的时候进行循环判断

这里边的row是传进来的参数

这样就实现了新增标签和删除标签

效果图

在这里我的第一个标签页不能删除,所以我把删除按钮隐藏掉了

在看到 polyfill.io 后里面有个动态插入polyfill的关键点,感觉挺巧妙的,以后遇到这种类似需求也可以照着去实现

实现原理其实很简单,只需要在加载的脚本最后面添加执行函数就可以,

例如上面的脚本加载结束之后的例子:

重点在最后一句 typeof main==='function' &&main()

此种方法也可以加载服务器上的静态资源数据,

将服务器上的数据使用 *.js ,然后里面就放一个执行函数,当然此时也可以携带参数数据,当用script标签动态加载后,这个执行函数就会执行.实现了动态加载数据.

data.js数据为:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/7923533.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-11
下一篇 2023-04-11

发表评论

登录后才能评论

评论列表(0条)

保存