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 = ...
随机推荐
- unity 2d游戏 按y坐标排序子对象
List<Transform> objs = new List<Transform>(); for (int i = 0; i < transform.childCoun ...
- js数组方法汇总
下面主要汇总一下数组的方法 数组方法: 1.检测是否为数组的方法:Array.isArrray(); var arr=[1,2,3,4,5]; var str='string'; console.lo ...
- 【Python爬虫】PyQuery解析库
PyQuery解析库 阅读目录 初始化 基本CSS选择器 查找元素 遍历 获取信息 DOM操作 伪类选择器 PyQuery 是 Python 仿照 jQuery 的严格实现.语法与 jQuery 几乎 ...
- 内核ipc机制
内核版本:linux2.6.22.6 硬件平台:JZ2440 驱动源码 block_ipc_poll_key_int_drv.c : #include <linux/module.h> # ...
- tortoisegit 常见错误disconnected no supported authentication methods available(server sent: publickey)
按如图操作 如果不能应用,Enable Proxy Server选中,再点击下面的应用及确定. 操作完上一部,用tortoisegit 下拉一次(git pull),即可解决
- JavaScript学习（二）
比如isNaN("100")会返回true 注意:parseInt()的参数必须以数字开头
- 检测到目标URL存在http host头攻击漏洞
检测到目标URL存在http host头攻击漏洞 1.引发安全问题的原因 为了方便的获得网站域名,开发人员一般依赖于HTTP Host header.例如,在php里用_SERVER["HT ...
- laravel项目出现Non-static method Redis::hGet() cannot be called statically的解决方法
早上ytkah在配置laravel项目中出现Non-static method Redis::hGet() cannot be called statically错误提示,很显然这是redis出问题了 ...
- 010-ThreadGroup线程组
线程组ThreadGroup表示一组线程的集合,一旦一个线程归属到一个线程组之中后,就不能再更换其所在的线程组.那么为什么要使用线程组呢?个人认为有以下的好处:方便统一管理,线程组可以进行复制,快速定 ...
- NYOJ 开心的小明
#include<iostream> #include<stdio.h> #include<string.h> #include<queue> #inc ...