jQuery HTML- 添加元素
添加内容
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery</title>
<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/try.js" ></script>
</head>
<body>
<p id="p1">hello</p>
<button id="btn1">点击</button>
<p id="p2">world</p>
<button id="btn2">点击</button> <p id="p3">world</p>
<button id="btn3">点击</button>
<p id="p4">world</p> <button id="btn4">点击</button>
</body>
</html>
js
$(document).ready(function(){
$("#btn1").click(function(){
$("#p1").append(" world");
});
$("#btn2").click(function(){
$("#p2").prepend("hello ");
});
$("#btn3").click(function(){
$("#p3").before("hello ");
});
$("#btn4").click(function(){
$("#p4").after("hello ");
});
});
效果:

2017-09-21 17:29:21
jQuery HTML- 添加元素的更多相关文章
- jquery动态添加元素无法触发绑定事件的解决方案。
jquery动态添加元素无法触发绑定的事件的解决方案. ╭(●`∀´●)╯二狗最近在工作中遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件(╯#-_-)╯╧═╧ ( ...
- jQuery动态添加元素事件
在项目中遇到需要jQuery动态添加元素的事件,做了一个demo,方便以后遇到相同的问题可以用上: <!DOCTYPE html> <html> <head> &l ...
- jquery中添加元素append,prepend,before和after方法的区别
append:在元素内部的最后面添加元素,作为子元素. prepend:在元素内部的最前面添加元素,作为子元素. before:在元素的前边,作为兄弟元素添加. after:在元素的后边,作为兄弟元素 ...
- jquery动态添加元素无法触发绑定的事件的解决方案
方法一:绑定live事件(live事件只在jquery1.9以下才支持,高版本不支持). //jquery 1.9(不包括1.9)以下可以 $(".btn").live(" ...
- jQuery 新添加元素事件绑定无效
jQuery中事件绑定,大多使用on就足够了. 但是对于新添加的元素 on 的绑定事件 会不起作用. 因为 append 中的 节点是在整个文档加载之后才添加的,页面并不会为未来的元素初始化添加点击事 ...
- Jquery动态添加元素并给元素增加onchange相应
动态添加元素: $select = $("<select></select>"); $("<option></option> ...
- jQuery动态添加元素,并提交json格式数据到后台
参考:https://www.cnblogs.com/shj-com/p/7878727.html 下载 下载该插件的地址是:http://www.bootcdn.cn/jquery.serializ ...
- jQuery动态添加元素并绑定事件
写网页的时候常常需要根据实际情况添加新的元素,然后这些新元素还需要绑定已有的事件,如:有一ul,点击其中某 li,根据其 id 或 value 等获取新的数据列表,并新建 ul 显示,新 ul 中的 ...
- jquery新添加元素无法删除
$("body").on('click',".delic",function(){ $(this).parent().remove(); })
- Jquery 动态添加元素后,获取不到元素对象情况
随机推荐
- 获取配置文件yml的@ConfigurationProperties和@Value的区别
首先,配置文件的事,我没讲properties,这个写中文的时候,会有乱码,需要去Idea里面设置一下编码格式为UTF-8 还有,我们的类和配置文件直接关联,我用的是ConfigurationProp ...
- 洛谷P4331[BOI2004] sequence
博客复活? 这个题很模板啊.随便上个左偏树.之前第一遍写对了.然后今天翻出来又写了一遍发现了一个奇奇怪怪的问题. 对比如下 上面的是AC 下面的WA 真的是一个很蠢的问题...你TM堆顶都弹出来了,堆 ...
- MyBatis框架之异常处理
MyBatis框架定义了许多的异常类,之所以定义这么多的异常类,应该是将每一种异常情况都独立出来,这样在出现异常时,定位就很明确了.而我们平时写代码时,都是瞎搞一通,异常类大多也是随便定义,或者是使用 ...
- springBoot02- 配置文件读取测试
1.照例登陆http://start.spring.io/ ,改个项目名(Artifact),然后下载导入Eclipse 2. 项目结构如下, 在pom中添加web依赖(不添加,就找不到RestCon ...
- [CSP-S模拟测试]:公园(BFS+剪枝)
题目传送门(内部题31) 输入格式 第一行,五个整数$V,M,N,E,L$.接下来$M$行,每行两个正整数$s_i,a_i$.保证$s_i$互不相等.接下来$N$行,每行两个正整数$t_j,b_j$. ...
- [CSP-S模拟测试]:chemistry(期望DP+组合数学)
题目传送门(内部题27) 输入格式 第一行有$4$个整数$n,k,p,q$.第二行有$n$个整数$a_i$.接下来有$n-1$行,每行有两个整数$u,v$,表示$u$与$v$之间通过化学单键连接. 输 ...
- vue绑定属性、绑定class及绑定style
1.绑定属性 v-bind 或者 : 例如:<img :src="pic_src" /> <template> <div id="app& ...
- Ubuntu 14.04修复grub
1.进livecd 2.sudo fdisk -l 找到安装分区 3.sudo mount /dev/sda? /mnt 挂载安装分区 4.sudo mount --bind /dev /mnt/de ...
- pytho装饰器参数那些事_inspect.getcallargs
''' Created on Jul 26, 2019 @author: tomcat ''' import inspect def chack_admin(func): def wrapper(*a ...
- 信息安全-OAuth2.0:NuGetFromMicrosoft
ylbtech-信息安全-OAuth2.0:NuGetFromMicrosoft 1.返回顶部 1. https://login.microsoftonline.com/common/oauth2/v ...