jquery append()方法与html()方法的区别及使用介绍


Posted in Javascript onAugust 01, 2014

append(content):方法在被选元素的结尾(仍然在内部)插入指定内容,有很多朋友觉得append与html差不多,其它从英文意义上append是在原有基础上增加,而html中是替换当前所有内容。

定义和用法

append() 方法在被选元素的结尾(仍然在内部)插入指定内容。
$(selector).append(content)

使用函数来附加内容
使用函数在指定元素的结尾插入内容。

语法

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

实例代码:

<script src="/jquery.min.js" type="text/javascript"></script> 
<style> 
.imgFocus{border: 1px solid #eee;} 
</style> 
<p> </p> 
<script type="text/javascript"> 
var showimg = "<div class='imgFocus'>123456</div>"; 
$("p").append(showimg); 
</script>

html() 方法返回或设置被选元素的内容 (inner HTML)。

如果该方法未设置参数,则返回被选元素的当前内容。
返回元素内容
当使用该方法返回一个值时,它会返回第一个匹配元素的内容。

语法

$(selector).html()

设置所有 p 元素的内容:

$(".btn1").click(function(){ 
$("p").html("Hello <b>world</b>!"); 
});

指定元素中清空

$("a[href$='logout.asp']").click(function(event) { 
event.preventDefault(); 
$.get("/xxlr/Logout.asp","",function(data, textStatus) { 
if (data == 1) { //表明注销成功 
$('#message').html(""); 
$("#userlogin>div").show(); 
} 
else { 
$('#message').append("<p><strong>注销失败,请重新尝试!</strong></p>"); 
} 
}); 
});

下面是网友的补充:

当然不一样了,append是追加,html是完全替换
比如<p id="1"><p>123</p></p>
$("#1").html("<span>456</span>");
结果是:<p id="1"><span>456</span></p>

$("#1").append("<span></span>");
结果是:<p id="1"><p>123</p><span>456</span></p>

Javascript 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
番茄的表单验证类代码修改版
Jul 18 Javascript
javaScript Array(数组)相关方法简述
Jul 25 Javascript
js转义字符介绍
Nov 05 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 Javascript
JavaScript简介
Feb 15 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
Angularjs中使用轮播图指令swiper
May 30 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 #Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 #Javascript
批量修改标签css样式以input标签为例
Jul 31 #Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 #Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 #Javascript
jquery获取一个元素下面相同子元素的个数代码
Jul 31 #Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 #Javascript
You might like
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
Python递归函数定义与用法示例
2017/06/02 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
Python操作mongodb的9个步骤
2018/06/04 Python
python3图片文件批量重命名处理
2019/10/31 Python
tensorflow之并行读入数据详解
2020/02/05 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
百联网上商城:i百联
2017/01/28 全球购物
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
Yahoo的PHP面试题
2014/05/26 面试题
国际政治个人自荐信范文
2013/11/26 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
高一军训的心得体会
2014/09/01 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
手机销售员岗位职责
2015/04/11 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
正规欠条模板
2015/07/03 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python