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获取onclick、onchange等事件值的代码
Jul 22 Javascript
jquery实现动态画圆
Dec 04 Javascript
简单分析javascript中的函数
Sep 10 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
浅谈Vue数据响应
Nov 05 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
Element Badge标记的使用方法
Jul 27 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 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来改写404错误页让你的页面更友好
2013/01/24 PHP
thinkPHP查询方式小结
2016/01/09 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
浅析javascript的return语句
2015/12/15 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
Python编码类型转换方法详解
2016/07/01 Python
python实现在一个画布上画多个子图
2020/01/19 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
J2EE包括哪些技术
2016/11/25 面试题
《鱼游到了纸上》教学反思
2014/02/20 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
诚信承诺书
2015/01/19 职场文书
特此通知格式
2015/04/27 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers