jQuery中append()方法用法实例


Posted in Javascript onDecember 25, 2014

本文实例讲述了jQuery中append()方法用法。分享给大家供大家参考。具体分析如下:

此方法可向所有匹配元素的内部的尾部追加HTML内容。

特别说明:

此方法是追加内容,并不会删除之前的内容。
html内容就是内容中可以包含html标签,并且能够被浏览器渲染。
文本内容是先将内容中的html预定义字符转换成html字符实体,这样html标签就不会被渲染。
语法结构:

$(selector).append(content)

实例代码:
实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

div 

{

  height:150px;

  width:150px;

  background-color:green;

  margin-top:10px;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("div").append("<b>好好学习</b>"); 

}) 

</script>

</head>

<body>

<div>原来内容</div>

</body>

</html>[/size]

[size=2]

在原来div内容的后面追加内容。
实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

div 

{

  height:150px;

  width:150px;

  background-color:green;

  margin-top:10px;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){  

  $("button").click(function(){ 

    $(".html").append("<b>好好学习</b>"); 

    $(".text").text("<b>好好学习</b>");     

  }) 

}) 

</script>

</head>

<body>

<div class="html"></div>

<div class="text"></div>

<button>点击查看效果</button>

</body>

</html>

通过此实例大家可以观察一下HTML内容和文本内容的区别。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
玩转方法:call和apply
May 08 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
常用的js方法合集
Mar 10 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 #Javascript
jQuery中html()方法用法实例
Dec 25 #Javascript
jQuery中val()方法用法实例
Dec 25 #Javascript
24款热门实用的jQuery插件推荐
Dec 24 #Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 #Javascript
Javascript 多物体运动的实现
Dec 24 #Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 #Javascript
You might like
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
PHP实现小偷程序实例
2016/10/31 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
asp.net和php的区别点总结
2019/10/10 PHP
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
详解node.js 事件循环
2020/07/22 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python 绘图和可视化详细介绍
2017/02/11 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
Python docx库用法示例分析
2019/02/16 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
python中random模块详解
2021/03/01 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
企业管理专业个人求职信范文
2013/09/24 职场文书
网上卖盒饭创业计划书
2014/01/26 职场文书
小学教师师德感言
2014/02/10 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
证婚人致辞精选
2015/07/28 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
Python MNIST手写体识别详解与试练
2021/11/07 Python