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中标签可以换行的方法汇总
Aug 14 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
vue.js表格分页示例
Oct 18 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
JS解析url查询参数的简单代码
Aug 06 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 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通过修改header强制图片下载的方法
2015/03/24 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
原生JS实现留言板
2020/03/26 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
Python中使用SAX解析xml实例
2014/11/21 Python
python复制文件的方法实例详解
2015/05/22 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
护理专业毕业生自我鉴定
2013/10/08 职场文书
银行实习生的自我评价
2014/01/13 职场文书
文案策划求职信
2014/03/18 职场文书
化工专业自荐书
2014/06/16 职场文书
最新离婚协议书范本
2014/08/19 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
安全生产会议制度
2015/08/06 职场文书
Golang连接并操作MySQL
2022/04/14 MySQL
Nginx配置之禁止指定IP访问
2022/05/02 Servers