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学习笔记6 prototype的提出
Jan 11 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
javascript history对象详解
Feb 09 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
详解原生JS回到顶部
Mar 25 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 Javascript
create-react-app开发常用配置教程
Jun 25 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绘制圆形的方法
2015/01/24 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
php实现通过ftp上传文件
2015/06/19 PHP
PHP单例模式详细介绍
2015/07/01 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
jQuery选择器全面总结
2014/01/06 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
纯js实现隔行变色效果
2017/11/29 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
python连接数据库的方法
2017/10/19 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
一份报关员的职业规划范文
2014/01/08 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
心灵捕手观后感
2015/06/02 职场文书
导游词之南京夫子庙
2019/12/09 职场文书