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 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
jQuery EasyUI API 中文文档 - Form表单
Oct 06 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
下拉框select的绑定示例
Sep 04 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
vue+iview动态渲染表格详解
Mar 19 Javascript
Swiper实现导航栏滚动效果
Oct 16 Javascript
js实现网页随机验证码
Oct 19 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的gd2库
2017/02/09 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
JavaScript关于select的相关操作说明
2010/01/13 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
python局域网ip扫描示例分享
2014/04/03 Python
Python原始字符串(raw strings)用法实例
2014/10/13 Python
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
Python 实现一个计时器
2020/07/28 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
pycharm实现猜数游戏
2020/12/07 Python
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
孝老爱亲模范事迹
2014/01/24 职场文书
房屋租赁意向书
2014/04/01 职场文书
商务日语专业自荐信
2014/04/17 职场文书
人力资源职位说明书
2014/07/29 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
房产公证委托书范本
2014/09/20 职场文书
2015年招商引资工作总结
2015/04/25 职场文书