通过js动态创建标签,并设置属性方法


Posted in Javascript onFebruary 24, 2018

当我们在写jsp页面时,往往会遇到这种情况:从后台获取的数据个数不确定,此时在前端写jsp页面时也就不确定怎么设计了。这个时候就需要通过js动态创建标签:

1.创建某个标签:如下在body中创建一个div的事例;

<script>
 function fun(){
 var frameDiv = document.createElement("div");//创建一个标签
 var bodyFa = document.getElementById("bodyid");//通过id号获取frameDiv 的父类(也就是上一级的节点)
 bodyFa .appendChild(frameDiv);//把创建的节点frameDiv 添加到父类body 中;
 }
<script>
<body id="bodyid" >
<!--在此添加div标签-->
</body>

2.添加属性:给创建的标签添加相应的属性:

frameDiv .setAttribute("id", "divid");//给创建的div设置id值;
frameDiv .className="divclass"; //给创建的div设置class;
//给某个标签添加显示的值;
var h = document.createElement("h1");
h.innerHTML = data[i].name;
var p = document.createElement("p");
p.innerHTML = "要显示的值";

3.创建的标签添加事件:

a.不带参数:

frameDiv.onmousedown = fun;//ps:函数名fun后面一定不能带括号,否则会在创建标签的时候执行函数, 而不是鼠标按下时执行;

b.有参数:

frameDiv.onmousedown = function(){ fun(this); }

c.要调用的函数;

function fun(){ 
alert("鼠标按下");
}

4.如果担心创建的标签没有被覆盖则可以替换:

var divFlag = document.getElementById("divFlag");
 var divMain = document.createElement("div");
 if(divFlag != null){
 body.replaceChild(divMain, divFlag);//把原来的替换掉
}
divMain.setAttribute("id", "divFlag");

以上这篇通过js动态创建标签,并设置属性方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
JS随机数产生代码分享
Feb 24 #Javascript
JS中常用的消息框总结
Feb 24 #Javascript
JS改变页面颜色源码分享
Feb 24 #Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 #jQuery
AngularJS创建一个上传照片的指令实例代码
Feb 24 #Javascript
javaScript动态添加Li元素的实例
Feb 24 #Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 #jQuery
You might like
浅谈COOKIE和SESSION区别
2015/07/19 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
javascript if条件判断方法小结
2014/05/17 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
js实现3D旋转相册
2020/08/02 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
使用PDB简单调试Python程序简明指南
2015/04/25 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
Python 爬虫的原理
2020/07/30 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
求职信怎么写
2014/05/23 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
李强为自己工作观后感
2015/06/11 职场文书
优秀员工演讲稿
2019/06/21 职场文书
Python django中如何使用restful框架
2021/06/23 Python