一、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. 防止XSRF 解决方案

    1.首先在表单提交页面生成校验使用的Token public ActionResult Index() { //Token验证需要使用的token string token = System.Guid ...

  2. mysql树查询、递归查询

    关键词:mysql树查询,mysql递归查询 转自:http://www.cnblogs.com/c-h-y/p/9420726.html 之前一直用的是Oracle,对于树形查询可以使用start ...

  3. eclipse中常用的快捷键【开发常用到的】

    1.全部选中:Ctrl+A 2.剪切Ctrl+X.复制Ctrl+C.粘贴Ctrl+V.保存Ctrl+S 3.撤销Ctrl+Z.取消撤销Ctrl+Y 4.规范代码:Ctrl+Shift+F 5.将代码更 ...

  4. [BZOJ 3731] Gty的超级妹子树 (树分块)

    [BZOJ 3731] Gty的超级妹子树 (树分块) 题面 给出一棵树(或森林),每个点都有一个值.现在有四种操作 1.查询x子树里>y的值有多少个 2.把点x的值改成y 3.添加一个新节点, ...

  5. 问题 H: 小k的简单问题

    问题 H: 小k的简单问题 时间限制: 1 Sec  内存限制: 128 MB提交: 107  解决: 57[提交] [状态] [命题人:jsu_admin] 题目描述 地图上有n个村庄,小k每个月需 ...

  6. log.info（）传入多个参数的方法

    不知道项目里用的是啥 ** 版本的 log4j 居然不能传入变长参数 logger.info(String.format("%s %s %s", username, feature ...

  7. JS补充笔记

    <script> 函数: 普通函数: function func(){ } 匿名函数: setInterval("func()",5000); setInterval( ...

  8. 【记录】解决windows中nginx明明退出了，为什么还能反向代理？CMD强制杀死进程命令

    博主今天遇到一个很奇怪的问题,nginx在windows中明明已经退出了,而且在任务管理器中也没发现nginx进程, 为什么还能反向代理呢? 找了半天资料终于解决,现记录如下,希望能帮助到你. 步骤一 ...

  9. 苹果账号需要的邓白氏D-U-N-S编码更新信息最新方法，官方已不受理邮件

    公司从上海搬迁到深圳,公司名称相应变更,但之前注册的苹果开发者账号上的名字还是就的,尝试在后台提交更新申请,官方给了邮件,要求邮件提交证明材料,证明材料提交后,苹果又反馈和邓白氏的资料不匹配,要求先修 ...

  10. KC705E 增强版 基于FMC接口的Xilinx Kintex-7 FPGA K7 XC7K325T PCIeX8 接口卡

    KC705E 增强版 基于FMC接口的Xilinx Kintex-7 FPGA K7 XC7K325T PCIeX8 接口卡 一.板卡概述 本板卡基于Xilinx公司的FPGAXC7K325T-2FF ...