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的each里用return true或false代替break或continue
May 21 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
vue2的todolist入门小项目的详细解析
May 11 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 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
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
浅析PHP开发规范
2018/02/05 PHP
php-fpm中max_children的配置
2019/03/15 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
使用Python神器对付12306变态验证码
2016/01/05 Python
Python实现单词翻译功能
2017/06/06 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
Python 远程开关机的方法
2020/11/18 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
高中生自我评价个人范文
2013/11/09 职场文书
体操比赛口号
2014/06/10 职场文书