通过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 相关文章推荐
新闻内页-JS分页
Jun 07 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
js实现消灭星星(web简易版)
Mar 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
php正则
2006/07/07 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
python读取html中指定元素生成excle文件示例
2014/04/03 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
Python处理中文标点符号大集合
2018/05/14 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
pip install命令安装扩展库整理
2021/03/02 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
教学器材管理制度
2014/01/26 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
运动会演讲稿50字
2014/08/25 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
高中生旷课检讨书
2014/10/08 职场文书
办公经费申请报告
2015/05/15 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
胡桃夹子观后感
2015/06/11 职场文书
签证工作证明模板
2015/06/15 职场文书
离职信范文
2015/06/23 职场文书
丧事酒宴答谢词
2015/09/30 职场文书