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正则表达式中参数g(全局)的作用
Nov 11 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
JS三级可折叠菜单实现方法
Feb 29 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 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
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
python在linux中输出带颜色的文字的方法
2014/06/19 Python
浅析Python编写函数装饰器
2016/03/18 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
python实现共轭梯度法
2019/07/03 Python
德国拖鞋网站:German Slippers
2019/11/08 全球购物
Linux文件系统类型
2012/02/15 面试题
关于奉献的演讲稿
2014/05/21 职场文书
中国梦读书活动总结
2014/07/10 职场文书
民主评议党员个人总结
2015/02/13 职场文书
2015年全国爱耳日活动总结
2015/02/27 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android
python区块链持久化和命令行接口实现简版
2022/05/25 Python