通过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 相关文章推荐
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
Javascript实现Array和String互转换的方法
Dec 21 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
javascript关于“时间”的一次探索
Jul 24 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
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
PHP 翻页 实例代码
2009/08/07 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
JavaScript运算符小结
2015/06/03 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
渗透攻击的测试步骤
2014/06/07 面试题
优秀研究生自我鉴定
2013/12/04 职场文书
离婚答辩状范文
2015/05/22 职场文书
入党介绍人考察意见
2015/06/01 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers
redis内存空间效率问题的深入探究
2021/05/17 Redis
JavaScript原型链详解
2021/11/07 Javascript