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 相关文章推荐
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
JQuery的$命名冲突详细解析
Dec 28 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
js简单的分页器插件代码实例
Sep 11 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/06/08 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
js中replace的用法总结
2013/12/27 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
python实现简单加密解密机制
2019/03/19 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
python实现图片中文字分割效果
2019/07/22 Python
pandas如何处理缺失值
2019/07/31 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
处理textarea中的换行和空格
2019/12/12 HTML / CSS
联想台湾官网:Lenovo TW
2018/05/09 全球购物
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
PHP经典面试题
2016/09/03 面试题
小学生班会演讲稿
2014/01/09 职场文书
自我推荐信范文
2014/05/09 职场文书
服务理念标语
2014/06/18 职场文书
2016中秋节问候语
2015/11/11 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技