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 相关文章推荐
JavaScript RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
js实现翻牌小游戏
Jul 31 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实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
JS判定是否原生方法
2013/07/22 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
Python生成pdf文件的方法
2014/08/04 Python
Python实现的批量下载RFC文档
2015/03/10 Python
python处理csv数据的方法
2015/03/11 Python
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
python定义类的简单用法
2020/07/24 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
精选奢华:THE LIST
2019/09/05 全球购物
导游个人求职信范文
2014/03/23 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书
实用求职信模板范文
2019/05/13 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle