• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jquery append()方法与html()方法的区别及使用介绍

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了jquery,append(),html()等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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>

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 2017-08-16jquery实现手机号码选号的方法
  • 2017-08-16通过jQuery源码学习javascript(一)
  • 2017-08-16jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
  • 2017-08-16jQuery插件ajaxFileUpload异步上传文件
  • 2017-08-16jQuery的 $.ajax防止重复提交的两种方法(推荐)
  • 2017-08-16javascript特殊用法示例介绍
  • 2017-08-16jquery 防止表单重复提交代码
  • 2017-08-16jQuery实现两列等高并自适应高度
  • 2017-08-16jQuery图片拖动组件Dropzone用法示例
  • 2017-08-16jquery解析XML字符串和XML文件的方法说明

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 老生常谈jquery中detach()和remove()的区别
    • 6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
    • 使用Jquery打造最佳用户体验的登录页面的实现代码
    • 50 个 jQuery 插件可将你的网站带到另外一个高度
    • 基于Jquery实现表单验证
    • 浅析jQuery1.8的几个小变化
    • 基于jquery的DIV随滚动条滚动而滚动的代码
    • Easyui使用Dialog行内按钮布局的实例
    • jquery实现上下左右滑动的方法
    • jQuery在html有效在jsp无效的原因及解决方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有