jQuery文档操作--append()、prepend()、after()和before()
append(content|fn)
概述
向每个匹配的元素内部追加内容，这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似
参数
content 要追加到目标中的内容
function(index, html) 返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值
prepend(content)
概述
向每个匹配的元素内部前置内容，这是向所有匹配元素内部的开始处插入内容的最佳方式
参数
content 要插入到目标元素内部前端的内容
function(index, html) 返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<title></title>
<script>
$(document).ready(function() {
$("#btn").click(function() {
$("ol").append(function(index, html) {
return "<li style='color: #FF0000;'>后面追加文本</li>";
}); $("ol").prepend(function(index, html) {
return "<li style='color: #FF0000;'>前面追加文本</li>";
}); $("ol").append(appendcontext); $("ol").prepend(prependcontext); });
}); function appendcontext() {
return "<li style='color: #0000FF;'>后面追加文本</li>";
} function prependcontext() {
return "<li style='color: #0000FF;'>前面追加文本</li>";
}
</script>
</head> <body>
<ol>
<li>这是一个段落。</li>
<li>这是另外一个段落。</li>
</ol>
<button id="btn">添加文本</button>
</body> </html>
after(content|fn)
概述
在每个匹配的元素外部之后插入内容
参数
content 插入到每个目标后的内容
function 函数必须返回一个html字符串
before(content|fn)
概述
在每个匹配的元素外部之前插入内容
参数
content 插入到每个目标后的内容
function 函数必须返回一个html字符串
<!DOCTYliE html>
<html> <head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<title></title>
<script>
$(document).ready(function() {
$("#btn").click(function() {
$("ol").after(function() {
return "<b style='color: #FF0000;'>后面追加文本</b>";
});
$("ol").before(function() {
return "<b style='color: #FF0000;'>前面追加文本</b>";
});
$("ol").after(aftercontext);
$("ol").before(beforecontext);
});
}); function aftercontext() {
return "<b style='color: #0000FF;'>后面追加文本</b>";
} function beforecontext() {
return "<b style='color: #0000FF;'>前面追加文本</b>";
}
</script>
</head> <body>
<ol>
<li>这是一个段落。</li>
<li>这是另外一个段落。</li>
</ol>
<button id="btn">添加文本</button>
</body> </html>
jQuery文档操作--append()、prepend()、after()和before()的更多相关文章
- jQuery 文档操作之prepend() 和prependTo()方法.
//prepend() $("#btnpre").click(function(){ //该方法在被选元素的开头(仍位于内部)插入指定内容. $("div"). ...
- jQuery文档操作
jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...
- jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp 实例 使用 noConflict() 方法为 jQuery 变量规定新 ...
- HTML jQuery 文档操作 - html() 方法
jQuery 文档操作 - html() 方法 jQuery 文档操作参考手册 实例 设置所有 p 元素的内容: $(".btn1").click(function(){ $(&q ...
- jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- 前端之JQuery：JQuery文档操作
jquery之文档操作 一.相关知识点总结1.CSS .css() - .css("color") -> 获取color css值 - .css("color&qu ...
- jQuery 文档操作 - prependTo() ，appendTo()方法
其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...
- jQuery 文档操作方法(append)
这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 一.append() 方法 append() 方法在被选元素的结尾(仍然在内部)插入指定内容. 例子: <html& ...
- jQuery 文档操作
一.插入操作 1. 父元素.append(子元素) 追加某元素,在父元素中添加新的子元素, 子元素可以为: stirng / element (js对象) / jquery 元素 var oli = ...
随机推荐
- Struts2漏洞检查工具
- 七、Spring Boot 启动配置原理
几个重要的事件回调机制 配置在META-INF/spring.factories ApplicationContextInitializer SpringApplicationRunListener ...
- mysql 查询优化杂谈
一.把某些判断移动到应用层 我们需要在一张表里面删除某种类型的数据,大概的表结构类似这样: CREATE TABLE t ( id INT, tp ENUM ("t1", &quo ...
- MySQL group replication介绍
“MySQL group replication” group replication是MySQL官方开发的一个开源插件,是实现MySQL高可用集群的一个工具.第一个GA版本正式发布于MySQL5.7 ...
- Windows系统重装工具 WinToHDD Enterprise v2.8 企业破解版
WinToHDD 是一款实用的 Windows 系统硬盘安装工具,有点类似于NT6 HDD Installer,它能不依靠光驱和U盘,让你直接通过本机硬盘来新装.重装和克隆 Windows 系统,支持 ...
- eslint 代码规范2
eslint 规则修改 需要修改规则:文件[.eslintrc.js] 在句末是不能有分号的,若想加分号, 报错: 添加代码: 'semi': ['error', 'always'] 不要使用制表符. ...
- Number (float bool complex)浮点型、bool 布尔型 True、False 、complex 复数类型
# Number (float bool complex) # ### float 浮点型 就是小数 # (1) 表达形式一 floatvar = 3.14 print(floatvar) #获取类型 ...
- vue 获取屏幕宽高 width height
/** * 获取屏幕宽高 */ Vue.prototype.getViewportSize = function(){ return { width: window.innerWidt ...
- 利用SparkLauncher 类以JAVA API 编程的方式提交Spark job
一.环境说明和使用软件的版本说明: hadoop-version:hadoop-2.9.0.tar.gz spark-version:spark-2.2.0-bin-hadoop2.7.tgz jav ...
- linux curl命令如何上传本地文件夹和下载文件
本地有一个文件夹为my_dir,里面有四个文件,分别是test1.txt,user_account,tools_user,plans 要把这个my_dir文件夹传到ftp 192.168.8.251 ...