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 动态添加元素后,获取不到元素对象情况
随机推荐
- TCP协议的简单应用一
TCP协议的应用,实现一个服务器处理多个客户端请求(向服务器发送消息,服务器接收到后以原消息返回给客户端.) 客户端类 import java.io.*; import java.net.Socket ...
- python之chardet用来检测字符串编码的
import chardet a=b'\xe4\xbd\xa0\xe5\xa5\xbd\xef\xbc\x8c\xe4\xb8\x96\xe7\x95\x8c\xe3\x80\x82'print(ch ...
- Kafka初识
1.概述 1.1.Apache Kafka是一个 分布式 流处理 平台: 2.Kafka适应于什么场景? 2.1.构造 实时 流数据管道,在 系统 或 应用之间 可靠地获取数据(相当 ...
- Redis5离线安装
1. 直接上redis官网安装包, 然后上传服务器 https://redis.io/download 2. 解压 tar -zxvf redis-5.0.6.tar.gz 3. 进入redis根目标 ...
- Python函数中*args和**kwargs来传递变长参数的用法
参考自: http://www.jb51.net/article/78705.htm 单星号形式(*args)用来传递非命名键可变参数列表.双星号形式(**kwargs)用来传递键值可变参数列表. 1 ...
- .NET Core 构建跨平台的桌面应用
1.运行环境 开发工具:Visual Studio 2017 JDK版本:.NET Core 2.0 项目管理工具:nuget 2.GITHUB地址 https://github.com/nbfujx ...
- 状压 DP:[USACO06NOV] Corn Fields,[USACO13NOV] No Change
[USACO06NOV] Corn Fields (试题来源:Link ) 题目描述 Farmer John has purchased a lush new rectangular pasture ...
- [CSP-S模拟测试]:chemistry(期望DP+组合数学)
题目传送门(内部题27) 输入格式 第一行有$4$个整数$n,k,p,q$.第二行有$n$个整数$a_i$.接下来有$n-1$行,每行有两个整数$u,v$,表示$u$与$v$之间通过化学单键连接. 输 ...
- 运行python不报错,运行pip报错
Fatal error in launcher: Unable to create process using '""c:\program files (x86)\python36 ...
- python slot
每个实例包含一个字典,slot 让实例变成tup 或list,减少内存,但不能再增加属性 For classes that primarily serve as simple data structu ...