通过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中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
ScrollDown的基本操作示例
Jun 09 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
微信小程序 常用工具类详解及实例
Feb 15 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
vue+Element-ui前端实现分页效果
Nov 15 Javascript
JS实现扫雷项目总结
May 19 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 strtr() 函数使用说明
2008/11/21 PHP
php self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
php懒人函数 自动添加数据
2011/06/28 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
python实现图片压缩代码实例
2019/08/12 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
python实现用户名密码校验
2020/03/18 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
电台实习生求职信
2014/02/25 职场文书
如何写自我鉴定
2014/03/19 职场文书
医药销售自荐书
2014/05/29 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书