jQuery中append()方法用法实例


Posted in Javascript onJanuary 08, 2015

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

此方法在匹配元素的结尾插入指定内容。
元素被插入的位置是匹配元素的内部,而after()方法元素被插入的位置是匹配元素的外部。
append()方法的作用和appendTo()方法是相同的,但是语法是不同的,尽管语法形式一样。

语法结构:

$(selector).append(content)

参数列表:

参数 描述
content 指定被插入的内容,content的可能的值: 1.HTML 代码 - 比如 ("")。 2.已存在的元素 - 比如 ($(".div1"))。 3.function(index)函数 - 定义返回插入元素的函数,index参数接收选择器的索引位置。
selector 要被插入内容的匹配元素

实例:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset=" utf-8"> 

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

<title>append()函数-三水点靠木</title>

<style type="text/css">

div{

  height:200px;

  width:200px;

  border:1px solid green;

}

</style>

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

<script type="text/javascript">

$(document).ready(function(){

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

    $("div").append("被添加的内容");

  })

});

</script>

</head>

<body>

<div>后面要添加内容:</div>

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

</body>

</html>

以上代码能够将指定的文本添加到div的内部的尾部。

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

Javascript 相关文章推荐
javscript对象原型的一些看法
Sep 19 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
Angular5.1新功能分享
Dec 21 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
jQuery中end()方法用法实例
Jan 08 #Javascript
jQuery中contents()方法用法实例
Jan 08 #Javascript
jQuery中andSelf()方法用法实例
Jan 08 #Javascript
jQuery中add()方法用法实例
Jan 08 #Javascript
javascript 动态创建表格
Jan 08 #Javascript
javascript实现避免页面按钮重复提交
Jan 08 #Javascript
Node.js 制作实时多人游戏框架
Jan 08 #Javascript
You might like
php算法实例分享
2015/07/14 PHP
php封装的page分页类完整实例
2016/10/18 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
详解React服务端渲染从入门到精通
2019/03/28 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
Python通过poll实现异步IO的方法
2015/06/04 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
Python实现购物车程序
2018/04/16 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
澳洲的服装老品牌:SABA
2018/02/06 全球购物
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
密封类可以有虚函数吗
2014/08/11 面试题
超级搞笑检讨书
2014/01/15 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
初三学生评语大全
2014/04/24 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
2014年团总支工作总结
2014/11/21 职场文书
个人工作年终总结
2015/03/09 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android