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()的更多相关文章

  1. jQuery 文档操作之prepend() 和prependTo()方法.

    //prepend() $("#btnpre").click(function(){ //该方法在被选元素的开头(仍位于内部)插入指定内容. $("div"). ...

  2. jQuery文档操作

    jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...

  3. jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法

    原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp   实例 使用 noConflict() 方法为 jQuery 变量规定新 ...

  4. HTML jQuery 文档操作 - html() 方法

    jQuery 文档操作 - html() 方法 jQuery 文档操作参考手册 实例 设置所有 p 元素的内容: $(".btn1").click(function(){ $(&q ...

  5. jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  6. 前端之JQuery：JQuery文档操作

    jquery之文档操作 一.相关知识点总结1.CSS .css() - .css("color") -> 获取color css值 - .css("color&qu ...

  7. jQuery 文档操作 - prependTo() ，appendTo()方法

    其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...

  8. jQuery 文档操作方法(append)

    这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 一.append() 方法 append() 方法在被选元素的结尾(仍然在内部)插入指定内容. 例子: <html& ...

  9. jQuery 文档操作

    一.插入操作 1. 父元素.append(子元素) 追加某元素,在父元素中添加新的子元素, 子元素可以为: stirng / element (js对象) / jquery 元素 var oli = ...

随机推荐

  1. PHP 小知识

    -- 获取/设置响应的 HTTP 状态码 mixed http_response_code ([ int $response_code ] ) -- ... 操作符知道是什么么?看看 PHP 官方的 ...

  2. JMeter之http接口测试

    能做哪些类型性能测试 接口 文件传输(ftp) 数据库 支持自定义java组件开发 安装 http://jmeter.apache.org/ 进入上面的链接 选择合适版本下载 启动 使用 Jmeter ...

  3. 洛谷P2852 牛奶模式Milk Patterns [USACO06DEC] 字符串

    正解:SA/二分+哈希 解题报告: 传送门! umm像这种子串的问题已经算是比较套路的了,,,?就后缀的公共前缀这样儿的嘛QwQ 所以可以先求个SA 然后现在考虑怎么判断一个长度为d的子串出现了k次? ...

  4. 解决采集知乎数据时由于账号被封遗漏的账号重爬问题（python代码）

    '''一.最笨的办法了################################################################为了处理由于账号被封而没跑到的问题id进行以下两步 ...

  5. 28-1-LTDC显示中英文

    1.字符编码 由于计算机只能识别 0 和 1,文字也只能以 0 和 1 的形式在计算机里存储,所以我们需要对文字进行编码才能让计算机处理,编码的过程就是规定特定的 01 数字串表示特定的文字,最简单的 ...

  6. kvc原理

    KVC底层实现原理 第一步:寻找该属性有没有setsetter方法?有,就直接赋值 第二步:寻找有没有该属性带下划线的成员属性?有,就直接赋值 第三步:寻找有没有该属性的成员属性?有,就直接赋值 1. ...

  7. 接口测试工具-Jmeter使用笔记（二：GET/POST请求参数填写）

    举例来说 我的被测系统API的http请求涉及到GET/POST/PUT/DELETE四种.请求传参可分为两种: GET请求 http://请求路径/Ecs-duHc0U4E #该请求参数“Ecs-d ...

  8. （4.21）sql server中复制查询结果集

    在查询结果窗口中复制列标题似乎是一项简单的任务,但对于业余爱好者来说,这可能是一场噩梦. 没有可见的指令/链接/按钮,其中一个可以使用列标题单击和复制所选数据.让我们看看如何在SQL Server M ...

  9. MongoDB update修改器 目录

    MongoDB update修改器: 针对Fields的$修改器 $inc $set $unset MongoDB update修改器: 针对Arrays的$修改器 $push $pull $pop ...

  10. PHP策略模式1

    [IUser.php] <?php /** * 策略模式 * 将一组特定的行为和算法封装成类,用来适应某些特定的上下文环境,实现从硬编码到解耦 * 应用举例:电商系统针对不同性别跳转到不同的商品 ...