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 相关文章推荐
鼠标事件延时切换插件
Mar 12 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 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类和对象相关系统函数与运算符小结
2016/09/28 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
cloudgamer出品ImageZoom 图片放大效果
2010/04/01 Javascript
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
python 模拟登陆github的示例
2020/12/04 Python
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
预备党员思想汇报
2014/01/08 职场文书
期末评语大全
2014/05/04 职场文书
诚信贷款承诺书
2014/05/30 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
迎新生标语大全
2014/10/06 职场文书
2015年党建工作总结
2015/03/30 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
论文致谢词范文
2015/05/14 职场文书
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
css3应用示例:新增的选择器
2022/03/16 HTML / CSS