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 相关文章推荐
setAttribute 与 class冲突解决
Feb 17 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
javascript面向对象入门基础详细介绍
Sep 05 Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
JS实现简易计算器
Feb 14 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 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/25 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
javascript一些不错的函数脚本代码
2008/09/10 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android