一、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. Azylee.Utils 工具组

    https://github.com/yuzhengyang/Fork Fork 是平时做 C# 软件的时候,整合各种轮子的一个工具项目,包括并不仅限于:各种常用数据处理方法,文件读写 加密 搜索,系 ...

  2. 3 Vue.js基础

    Vue中的过滤器.钩子函数.指令.字符串填充.以及部分方法使用的案例(操作表单) <!DOCTYPE html> <html lang="en"> < ...

  3. IIS下如何配置免费的https

    1.首先我们要取走我们的证书,保存在我们本地的电脑里,然后复制到服务器即可. 2.取走后接下来干嘛?当然是打开文件看看里面有些什么啊.我们找到IIS那个压缩包并解压. 3.解析得到pfx文件,也就是我 ...

  4. XmlNode.PrependChild 方法

    using System; using System.IO; using System.Xml; public class Sample { public static void Main() { X ...

  5. JavaScript FSO属性大全

    什么是FSO? FSO 即 File System Object 文件系统对象,是一种列表 Windows 磁盘目录和文件,对目录和文件进行删除.新建.复制.剪切.移动等操作的技术.使用 FSO 网站 ...

  6. 第五周总结&第三次实验报告

    实验三 String类的应用 实验目的 掌握类String类的使用: 学会使用JDK帮助文档: 实验内容 1.已知字符串:"this is a test of java".按要求执 ...

  7. Python 特性？

    1.Python 是强语言类型还是弱语言类型? Python 是强类型的动态脚本语言.强类型:不允许不同类型相加.动态:不使用显示数据类型声明,且确定一个变量的类型是在第一次给它赋值的时候.脚本语言: ...

  8. PC端实现浏览器点击分享到QQ好友,空间,微信,微博等

    网上现在比较流行的是JIaThis,但是测试的时候,不能分享给QQ好友,一直卡在输入验证码,以下代码亲测有效,可直接使用 <%@ page language="java" c ...

  9. .NET Core _linux sdk安装

    根据官方介绍页面的步骤: 步骤1. sudo sh -c 'echo "deb [arch=amd64] https://apt-mo.trafficmanager.net/repos/do ...

  10. ionic -v2版本项目结构

    myApp │  config.xml  //项目配置文件,包名.名称.minSdkVersion等都在此处配置 │  ionic.config.json │  package.json  //项目依 ...