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开发技术大全-第3章 js数据类型
Jul 03 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
js函数和this用法实例分析
Mar 13 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
JavaScript代码简化技巧实例解析
Sep 09 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
用文本文件制作留言板提示(下)
2006/10/09 PHP
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
python错误处理详解
2014/09/28 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
python+opencv实现摄像头调用的方法
2019/06/22 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
解析Python3中的Import
2019/10/13 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
如何在django中实现分页功能
2020/04/22 Python
Python configparser模块应用过程解析
2020/08/14 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
学生个人的自我评价分享
2013/11/05 职场文书
即兴演讲稿
2014/01/04 职场文书
师德模范事迹材料
2014/06/03 职场文书
企业人事任命书
2014/06/05 职场文书
主持人开幕词
2015/01/29 职场文书
南京南京观后感
2015/06/02 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript