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中获取样式的原生方法小结
Oct 08 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
JavaScript 处理树数据结构的方法示例
Jun 16 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
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
全面了解js中的script标签
2016/07/04 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
Vue实现简易计算器
2020/02/25 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
Python 学习笔记
2008/12/27 Python
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
Python深入06——python的内存管理详解
2016/12/07 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
python requests使用socks5的例子
2019/07/25 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
银行实习自我鉴定
2013/10/12 职场文书
建筑工程技术应届生求职信
2013/11/17 职场文书
加拿大探亲邀请信
2014/01/28 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
新闻报道策划方案
2014/06/11 职场文书
节水口号标语
2014/06/19 职场文书
社区班子对照检查材料
2014/08/27 职场文书
护士个人年度总结范文
2015/02/13 职场文书
PHP新手指南
2021/04/01 PHP
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
Python中super().__init__()测试以及理解
2021/12/06 Python
Docker官方工具docker-registry案例演示
2022/04/13 Servers