动态生成html元素并为元素追加属性
动态生成HTML元素的方法有三种:
第一种:document.createElement()创建元素,再用appendChild( )方法将元素添加到指定节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<div id="main">
<span id="login"></span>
</div>
</body> <script>
var link = document.createElement('a');
link.setAttribute('href','#');
link.setAttribute('id','login');
link.style.color = 'green';
link.innerHTML = '登录';
var main = document.getElementById('main');
main.appendChild(link);
</script> </html>
第二种:使用innerHTML直接将元素添加到指定节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<div id="main">
<span id="login"></span>
</div>
</body> <script>
var link = document.createElement('a'); //使用innerHTML将元素直接添加到指定节点
main.innerHTML = "<a href='#' id='login' style='color: red;'>登录</a>";
</script> </html>
第三种:jQuery创建节点
jQuery中创建DOM对象,使用jQuery的工厂函数$( )完成,格式如下:
$(html),$(html)会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后再返回到前台页面上。
jQuery中将创建的节点插入文本中,使用append( )等方法,jQuery中插入节点方法有:
1. append():向每个匹配的元素内部追加内容
2.appendTo():将所有匹配的元素追加到指定元素中,颠倒了常规的$(A).append(B)方法,不是将B追加到A中,而是将A追加到B中
3.prepend():向每个匹配的元素内部前置内容
4.prependTo():将所有匹配的内容前置到指定的元素中,与prpend( )方法颠倒
5.after():向每个匹配的元素之后插入内容
6.insertAfter():将所有匹配的元素插入到指定元素的后面,与after()方法颠倒
7.before():在每个匹配的元素之前插入内容
8.insertBefore():将每个匹配的元素插入到指定内容之前,与before()方法颠倒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.min.js"></script>
<style type="text/css">
.newStyle{
color:red
}
</style> <script>
$(function(){
var link=$('<a href="#" id="link" style="color:pink">登录</a>');
$('#main').append(link).addClass("newStyle");
})
</script>
</head> <body>
<div id="main"></div>
</body>
</html>
借鉴文档出处:https://blog.csdn.net/fredaouyang/article/details/56481458
动态生成html元素并为元素追加属性的更多相关文章
- v-if案例解析(element-ui form-item 结合 v-if 动态生成rule规则\表单元素,表单无法验证问题剖析 )
fire 读在最前面: 1.此文章衔接Vue 虚拟Dom 及 部分生命周期初探,相关整体知识点请先阅读后再继续本文阅读 问:当v-if为true时,会重新渲染相关dom节点吗? <child v ...
- Java动态生成类以及动态添加属性
有个技术实现需求:动态生成类,其中类中的属性来自参数对象中的全部属性以及来自参数对象properties文件. 那么技术实现支持:使用CGLib代理. 具体的实现步骤: 1.配置Maven文件: &l ...
- 利用runtime动态生成对象?
利用runtime我们能够动态生成对象.属性.方法这特性 假定我们要动态生成DYViewController,并为它创建属性propertyName 1)对象名 NSString *class = @ ...
- jquery动态生成的元素添加事件的方法
动态生成的元素如果要添加事件,要写成 $(document).on("click", "#txtName", function() { alert(this.v ...
- JS动态生成的元素,其对应的方法不响应(比如单击事件,鼠标移动事件等)
主要原因:在页面给元素注册点击事件的时候[ $(function () { XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...
- jQuery1.9之后使用on()绑定 动态生成元素的 事件无效
来自互联网: 需要绑定a的父级元素(此元素必须为静态元素,不是后来动态生成的),然后设定on()方法的selector参数才行: $('p').on('mouseenter', 'a', functi ...
- 动态生成元素动作绑定,jquery 1.9如何实现
1.7后增加了 live()1.9后被移除了 网上说可以用 on() 代替 可以实际在动态生成元素上绑定动作,没效果,求解绝方法(用低版本的jQuery这种方法,求别说..) 答: 之前有老兄回答过类 ...
- JQuery中动态生成元素的绑定事件(坑死宝宝了)
今天在做项目的时候,遇到了一个前端的问题,坑了我好长时间没有解决,今天就记录于此,也分享给大家. 问题是这样的,首先看看我的界面,有一个初始印象: 下面是操作列所对应的JS代码: { "da ...
- JQuery使用on绑定动态生成元素时碰到的问题
今天在写界面时,希望对一些由JS代码动态添加的html标签进行事件绑定,使用了jquery 1.6+才提供的on函数.我的JQ版本是1.9.2. 以下这段代码是动态生成的. <div class ...
随机推荐
- java连接数据库以及连接参数格式
//链接数据库代码部分 下面具有连接的基本参数可以对照修改(参数存放在file下面的database.properties下面) //参数存放在file下面的database.properties下 ...
- mybatis学习 十五 resultMap标签 一对多
多次查询,非联合查询版本 <resultMap type="teacher" id="techMap"> <id column="i ...
- mybatis 接口绑定 和 动态SQL
一.MyBatis 接口绑定方案及多参数传递 1.作用:实现创建一个接口后把mapper.xml由mybatis生成接口的实现类,通过调用接口对象就可以获取mapper.xml中编写的sql 2.后面 ...
- 【转】如何用Redis做LRU-Cache
LRU(Least Recently Used)最近最少使用算法是众多置换算法中的一种. Redis中有一个maxmemory概念,主要是为了将使用的内存限定在一个固定的大小.Redis用到的LRU ...
- 2019.01.19 codeforces915E.Physical Education Lessons(ODT)
传送门 ODT水题(当然可以上线段树) 支持区间01覆盖,询问全局1的个数. 思路:直接上ODTODTODT. 不会的点这里 代码: #include<bits/stdc++.h> #de ...
- 2018.11.02 NOIP模拟 飞越行星带(最小生成树/二分+并查集)
传送门 发现题目要求的就是从下到上的瓶颈路. 画个图出来发现跟去年noipnoipnoip提高组的奶酪差不多. 于是可以二分宽度+并查集检验,或者直接求瓶颈. 代码
- js 判断 undefined,单选 以及下拉框选中状态
name = $(this).attr("title"); if(typeof(name) == 'undefined'){ alert(1); } typeof 函数 radio ...
- 2.7 Sobel导数
OpenCV函数 Sobel(src_gray,grad_x/grad_y,ddepth,x_order,y_order,scale,delta,BORDER_DEFAULT ) Scharr( ) ...
- hdu-1255(线段树求面积并)模板
题目链接:传送门 思路: (1)建立线段的信息,每个线段存储l到r的线段的x位置和y的起始点与终点. 建立线段树的节点信息,每个节点代表一个区间的信息,x表示区间的横坐标的位置,l,r表示纵坐标的范围 ...
- linux yum 本地源配置
1.查看硬盘情况 lsblk sr0就是光驱了 2.执行挂载命令 查看光驱cd /devls 执行命令 mount /dev/sr0 /mnt 将光驱挂载到 /mnt 目录 这样光驱就挂载好了 2. ...