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 = ...
随机推荐
- git 码云的常用命令（版本控制）
首先在码云仓库创建对应的仓库 当你输入错误用户名和密码 需要清掉配置 git config --system --unset credential.helper 设置账号 git config --g ...
- pandas基础
1.相关库导入 2.创建数据结构 pandas 有两个重要的数据结构: Series 和 DataFrame 创建Series数组,代表一行或一列 创建DataFrame ,代表二维数组 第一种方式: ...
- python编码类型互转总结
1.只有在unicode下才能将utf-8与gbk互转2.unicode是在内存中使用,bytes是文件存储和网络传输时使用-------------------------------------- ...
- js中值的基本类型与引用类型，以及对象引用，对象的浅拷贝与深拷贝
js有两种类型的值:栈:原始数据类型(undefinen,null,boolead,number,string)堆:引用数据类型(对象,函数和数组)两种类型的区别是:储存位置不同,原始数据类型直接存储 ...
- linux 替换 sed命令 转载
转载自这里,感谢原作者 sed 's/test/mytest/g' example.txt 表示将example.txt中的test文本全部替换为mytest 请注意这个命令sed 's/test/m ...
- 【JMeter】【性能测试】服务器性能监控
下载插件 1.访问网址http://jmeter-plugins.org/downloads/all/,下载三个文件.其中JMeterPlugins-Standard和JMeterPlugins-Ex ...
- Springboot打包war
pom: 1.<packaging>war</packaging> 2.<dependency> <groupId>org.springframewor ...
- 字符串类型 str-->转义符-->字符串格式化-->占位符-->综合案例
# ###字符串类型 str """ 用引号起来的就是字符串 三种引号:单引号 双引号 三引号 """ """ ...
- 如何解决gerrit代码冲突
日常开发中,我们存在多人开发和同一个人提交多次记录的情况,这就避免不了代码冲突的情况出现. 下面介绍几种gerrit提交失败的现象,后续会根据大家遇到的情况,持续更新. 注意:出现合入不了,显示“ca ...
- [Java in NetBeans] Lesson 08. If: conditional statement
这个课程的参考视频和图片来自youtube. 主要学到的知识点有: 1. If-else statement if (x > 5) { System.out.println("Inpu ...