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 动态添加元素后，获取不到元素对象情况
随机推荐
- python request post请求body中有json数组
今天被这个卡了好久,最后解决发现是个小问题,哈哈 记录: 用request发送post请求,原来当body都是普通的字符串和数字时一切顺利,今天遇到了body里面有json数组,结果就是报参数错误 解 ...
- find命令查找目录
find <path> -type d -name "dir_name" -type d是查找目录的参数,如果是查找其他的: -type b: Block specia ...
- leetcode-15双周赛-1288-删除被覆盖区间
题目描述: 方法一:排序O(Nlogn) class Solution: def removeCoveredIntervals(self, intervals: List[List[int]]) -& ...
- 阿里云李刚：下一代低延时的直播CDN
在上周落幕帷幕的多媒体领域技术盛会——LiveVideoStackCon音视频技术大会上,阿里云的高级技术专家李刚进行了<下一代低延时的直播CDN>技术分享.主讲人李刚,多年关注在CDN这 ...
- CALayer的mask属性
可以对图层按path进行指定裁剪 //#import "ViewController.h" // //@interface ViewController () // //@end ...
- Hadoop编程调用HDFS（PYTHON）
1.运行环境 开发工具:PyCharm Python 版本:3.5 Hadoop环境: Cloudera QuickStart 2.GITHUB地址 https://github.com/nbfujx ...
- 09-排序2 Insert or Merge（25 分）
According to Wikipedia: Insertion sort iterates, consuming one input element each repetition, and gr ...
- codeforces 559D Randomizer
题意简述: 在一个格点图中 给定一个凸$n$边形(每个定点均在格点上),随机选择其中一些点构成一个子多边形, 求子多边形的内部点个数的期望. ----------------------------- ...
- STM32几个IO的工作模式
浮空,顾名思义就是浮在空中,上面用绳子一拉就上去了,下面用绳子一拉就沉下去了. 开漏,就等于输出口接了个NPN三极管,并且只接了e,b. c极 是开路的,你可以接一个电阻到3.3V,也可以接一个电阻 ...
- oracle函数自治事务解决不能增改删的语句操作
CREATE OR REPLACE FUNCTION SEQ3 (v_bname in VARCHAR2) return NUMBER is pragma autonomous_transaction ...