一、append()和appendTo()

1.1 append()方法

<body>

    <p>好好学习</p>

    <button>append() 方法</button>

</body>

    <script>

        $('button').click(function() {

            $('p').append('<p>天天向上</p>');

        });

    </script>

1.2 appendTo()方法

<body>

    <p>好好学习</p>

    <button>appendTo() 方法</button>

</body>

    <script>

        $('button').click(function() {

            $('<p>天天向上</p>').appendTo('p');

        });

    </script>

1.3 append()和appendTo()比较

（1）用法相同
在被选元素的结尾（仍然在内部）插入指定内容。

（2）不同之处
内容和选择器的位置不同，以及 append() 能够使用函数来附加内容。

二、html()方法

2.1 返回元素内容

当使用该方法返回一个值时，它会返回第一个匹配元素的内容 (inner HTML)。

<body>

    <p>好好学习</p>

    <button>返回被选元素的内容</button>

</body>

    <script>

        $('button').click(function() {

            alert($('p').html());

        });

    </script>

2.2 设置元素内容

当使用该方法设置一个值时，它会覆盖所有匹配元素的内容 (inner HTML)。

<body>

    <p>好好学习</p>

    <button>设置被选元素的内容</button>

</body>

    <script>

        $('button').click(function() {

            $('p').html('天天向上');

        });

    </script>

2.3 使用函数来设置元素内容

（1）语法

$(selector).html(function(index,oldcontent))

（2）参数

参数 描述
function(index,oldcontent) 规定一个返回被选元素的新内容的函数。index - 可选。接收选择器的 index 位置。oldcontent - 可选。接收选择器的当前内容。

（3）示例

<body>

    <p>好好学习</p>

    <p>天天向上</p>

    <button>设置被选元素的内容</button>

</body>

    <script>

        $('button').click(function() {

            $('p').html(function (n) {

                return '这个 p 元素的 index 是' + ' ' + n;

            });

        });

    </script>

三、append()、appendTo()和html()的区别

（1）append()和appendTo()方法是在被选元素的结尾（仍然在内部）插入内容，是在原有内容的基础上增加。

（2）html()方法是覆盖所有内容，是原有的内容被替换。

阅读更多

jQuery入门教程-文档操作方法的更多相关文章

  1. javaweb 开发所需工具和入门教程文档等

    下载网址 1.JDK1.8下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.ht ...

  2. jquery.cookie 使用文档，$.cookie() 文档教程， js 操作 cookie 教程文档。

    jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...

  3. jQuery的文档操作方法

    jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...

  4. jQuery 文档操作方法

    jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...

  5. jQuery文档操作方法对比和src写法

    jQuery文档操作方法对比 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  6. Jq_文档操作方法、属性操作方法、CSS操作函数

    JQuery文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法                            描述 addClass()      ...

  7. dot.js教程文档api

    dot.js是一个短小精悍的js模板引擎,压缩版仅有4K大小,最近使用dot的时候整理出这个dot.js教程文档,其实称不上什么教程,只是对dot.js的介绍和实例,希望能帮助到一部分需要的人. 使用 ...

  8. ABP 教程文档 1-1 手把手引进门之 ASP.NET Core & Entity Framework Core（官方教程翻译版 版本3.2.5）

    本文是ABP官方文档翻译版,翻译基于 3.2.5 版本 官方文档分四部分 一. 教程文档 二.ABP 框架 三.zero 模块 四.其他(中文翻译资源) 本篇是第一部分的第一篇. 第一部分分三篇 1- ...

  9. ABP 教程文档 1-1 手把手引进门之 AngularJs, ASP.NET MVC, Web API 和 EntityFramework（官方教程翻译版 版本3.2.5）含学习资料

    本文是ABP官方文档翻译版,翻译基于 3.2.5 版本 转载请注明出处:http://www.cnblogs.com/yabu007/  谢谢 官方文档分四部分 一. 教程文档 二.ABP 框架 三. ...

随机推荐

  1. 个人对BFC的见解

    BFC:块级格式化上下文,它是指一个独立的块级渲染区域,只有Block-level BOX参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关. BFC的生成 既然上文提到BFC是一块渲 ...

  2. java二周的学习总结

    一转眼二周就过去了,个人觉得虽然java和C语言有差异,但差别并不大,因为语法语句方面都是差不多的,因为我上个学期并没有很认真的学好C语言,所以我这个学期更希望学好java,java方面还是挺有趣的, ...

  3. MySQL练习与小结

    当你专注一件事的时候,时间总是过得很快! foreign key 练习 -- 切换数据库 use stumgr -- 删除班级表 drop table t_class1 -- 创建一个班级表 crea ...

  4. [Python3] 017 字典的内置方法

    目录 1. Python3 中如何查看 dict() 的内置方法 2. 少废话,上例子 (1) 清理大师 clear() (2) 拷贝君 copy() (3) get(key, default=Non ...

  5. Hadoop运行模式：本地模式、伪分布模式、完全分布模式

    1.本地模式:默认模式 - 不对配置文件进行修改. - 使用本地文件系统,而不是分布式文件系统. - Hadoop不会启动NameNode.DataNode.ResourceManager.NodeM ...

  6. vue2.0 watch里面的 deep和immediate作用

    deep,默认值是 false,代表是否深度监听.immediate:true代表如果在 wacth 里声明了之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样, ...

  7. 洛谷 P1462 通往奥格瑞玛的道路（二分答案，堆优化dijkstra）

    传送门 解题思路 首先看题目问题,求经过的所有城市中最多的一次收取的费用的最小值是多少.一看“最大值最小”就想到了二分答案. 在读一遍题目,就是二分收取的费用,然后对于每一个二分的费用,跑一边最短路, ...

  8. Codeforces 515C 题解(贪心+数论)(思维题)

    题面 传送门:http://codeforces.com/problemset/problem/515/C Drazil is playing a math game with Varda. Let’ ...

  9. 使用sql追踪

    在会话层面使用sql追踪 1.查看sql追踪默认文件位置 2.设置trace文件名 alter session set tracefile_identifier='ymtrace001'; trace ...

  10. 什么是 Python？

     Python 是一种编程语言,它有对象.模块.线程.异常处理和自动内存管理,可以加入其他语言的对比.  Python 是一种解释型语言,Python 在代码运行之前不需要解释.  Python 是动 ...