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 相关文章推荐
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
js日历功能对象
Jan 12 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
react-native之ART绘图方法详解
Aug 08 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
vue实现商品加减计算总价的实例代码
Aug 12 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 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
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
node中的session的具体使用
2018/09/14 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
Node 代理访问的实现
2019/09/19 Javascript
js实现简易ATM功能
2020/10/27 Javascript
python批量下载图片的三种方法
2013/04/22 Python
python函数的万能参数传参详解
2019/07/26 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
jupyter notebook实现显示行号
2020/04/13 Python
Django封装交互接口代码
2020/07/12 Python
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
2014年内勤工作总结
2014/11/24 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python