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 相关文章推荐
jquery 学习之一 对象访问
Nov 23 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
js前端导出Excel的方法
Nov 01 Javascript
Vue组件的使用教程详解
Jan 05 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
详解jQuery中的prop()使用方法
Jan 05 jQuery
js实现图片上传到服务器和回显
Jan 19 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对图像的各种处理函数代码小结
2013/07/08 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
利用php输出不同的心形图案
2016/04/22 PHP
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
Python set集合类型操作总结
2014/11/07 Python
django缓存配置的几种方法详解
2018/07/16 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
简单了解python列表和元组的区别
2020/05/14 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
出纳的岗位职责
2013/11/09 职场文书
网页设计个人找工作求职信
2013/11/28 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
小学作文评语大全
2014/04/21 职场文书
2014年计生标语
2014/06/23 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers