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 相关文章推荐
javascript 播放器 控制
Jan 22 Javascript
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
jQuery Tools tab使用介绍
Jul 14 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
js简单工厂模式用法实例
Jun 30 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
微信小程序图片左右摆动效果详解
Jul 13 Javascript
JS实现打砖块游戏
Feb 14 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 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类的注册与自动加载
2013/07/05 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
js资料prototype 属性
2007/03/13 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
Python 可爱的大小写
2008/09/06 Python
详解python时间模块中的datetime模块
2016/01/13 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
python并发和异步编程实例
2018/11/15 Python
在django view中给form传入参数的例子
2019/07/19 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
Python如何实现机器人聊天
2020/09/10 Python
python把一个字符串切开的实例方法
2020/09/27 Python
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
你对IPv6了解程度
2016/02/09 面试题
长青弘远的面试题
2012/06/09 面试题
专家推荐信怎么写
2015/03/25 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
成绩单家长意见
2015/06/03 职场文书
十月围城观后感
2015/06/08 职场文书
同事欢送会致辞
2015/07/31 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书