jQuery中append()方法用法实例

本文实例讲述了jQuery中append()方法用法。分享给大家供大家参考。具体分析如下：

此方法在匹配元素的结尾插入指定内容。
元素被插入的位置是匹配元素的内部，而after()方法元素被插入的位置是匹配元素的外部。
append()方法的作用和appendTo()方法是相同的，但是语法是不同的，尽管语法形式一样。

语法结构:


代码如下:

$(selector).append(content)

参数列表:

参数 描述
content 指定被插入的内容，content的可能的值:
1.HTML 代码 - 比如 ("<div></div>")。
2.已存在的元素 - 比如 ($(".div1"))。
3.function(index)函数 - 定义返回插入元素的函数，index参数接收选择器的索引位置。
selector 要被插入内容的匹配元素

实例:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<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程序设计有所帮助。

赞 (0)

相关推荐

  • 解决Jquery向页面append新元素之后事件的绑定问题

    解决Jquery向页面append新元素之后事件的绑定问题

    我先看jq api文档没有找到方法,无果只好到网上找些资料,果然找到live方法. 其实很简单: 1.这是项目要求达到的效果,当我没用live事件,只用了简单的hover事件时:hover事件没有加载进来,没有我想要的边框效果,效果图如下 复制代码 代码如下: /*经过用户技能标签增加样式*/ $(function(){ $(".s-edited").hover(function(){    $(this).toggleClass("borderd"); }) })

  • jQuery 追加元素的方法如append、prepend、before

    jQuery 追加元素的方法如append、prepend、before

    1.jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 实例 $("p").append("Some appended text."); 2.jQuery prepend() 方法 jQuery prepend() 方法在被选元素的开头插入内容. 实例 $("p").prepend("Some prepended text."); 3.after() 和 before() 方法

  • jquery中append()与appendto()用法分析

    本文实例分析了jquery中append()与appendto()的用法.分享给大家供大家参考.具体分析如下: 在jQuery的文档操作方法中,append()和appentto()方法执行的任务相同,但是两者也有区别. 1.append()方法:在被选元素的结尾(但仍在元素内部)插入指定的内容. a.语法: 复制代码 代码如下: $(selector).append(content); 其中,参数content是必需的,指定要附加的内容. b.append能够使用函数给被选元素附加内容,语法为

  • jQuery使用append在html元素后同时添加多项内容的方法

    本文实例讲述了jQuery使用append在html元素后同时添加多项内容的方法.分享给大家供大家参考.具体分析如下: 下面的代码可以同时在文本段落后添加多项内容 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> function appendText() { var txt1="<p&g

  • jquery使用append(content)方法注意事项分享

    如以下示例:向所有段落中追加一些HTML标记. HTML 代码: 复制代码 代码如下: <p>I would like to say: </p> jQuery 代码: 复制代码 代码如下: $("p").append("<b>Hello</b>"); 结果: [ <p>I would like to say: <b>Hello</b></p> ] 这样看好像没什么,很正常

  • jQuery中append、insertBefore、after与insertAfter方法注意事项

    这里列的是针对初学jQuery者来说容易搞不懂的部分,我在这里把这些方法列了个清单,希望大家能看的懂.如下: 方法 源包装集/字串 目标包装集体 特性描述 A.append(B) B A 若目标包装集只匹配一个元素,则源(也包括同源包装集匹配的所有元素)将被移动到目标位置:若目标包装集包含多个元素,则源将保留在原来的位置,但同时复制一份相同的副本到目标位置. 由此,若目标只匹配一个元素时,使用前述方法后源将被删除. B.appendTo(A) A.prepend(B) B.prependTo(A

  • 关于jquery append() html时的小问题的解决方法

    还是先来看一下现象: 复制代码 代码如下: $(".main").append("haha"); $(".main").append("xixi"); alert($(".main").html()); 结果:hahaxixi 一切正常 改一下 复制代码 代码如下: $(".main").append("<div style=\"width:300px;heig

  • jQuery中append()方法用法实例

    本文实例讲述了jQuery中append()方法用法.分享给大家供大家参考.具体分析如下: 此方法在匹配元素的结尾插入指定内容. 元素被插入的位置是匹配元素的内部,而after()方法元素被插入的位置是匹配元素的外部. append()方法的作用和appendTo()方法是相同的,但是语法是不同的,尽管语法形式一样. 语法结构: 复制代码 代码如下: $(selector).append(content) 参数列表: 参数 描述 content 指定被插入的内容,content的可能的值: 1.

  • jQuery中unbind()方法用法实例

    本文实例讲述了jQuery中unbind()方法用法.分享给大家供大家参考.具体分析如下: 此方法移除被选元素的事件处理程序,包括通过bind()方法注册的自定义事件. unbind()方法如果不带参数,则删除所有绑定的事件. 此方法如果提供了事件类型作为参数,则只删除该类型的绑定事件. 如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除. 语法结构: 复制代码 代码如下: $(selector).unbind(type,function) 参数列表: 参数 描述

  • jQuery中trigger()方法用法实例

    本文实例讲述了jQuery中trigger()方法用法.分享给大家供大家参考.具体分析如下: 此方法触发匹配元素指定类型的事件. 语法结构一: 规定匹配元素被触发的事件类型. 复制代码 代码如下: $(selector).trigger(event,param1,param2,...) 参数列表: 参数 描述 event 规定指定元素要触发的事件. 可以是自定义事件(使用 bind() 函数来附加),或者任何标准事件. param 可选.传递到事件处理程序的额外参数. 额外的参数对自定义事件特别

  • jQuery中triggerHandler()方法用法实例

    本文实例讲述了jQuery中triggerHandler()方法用法.分享给大家供大家参考.具体分析如下: 此方法触发被选元素的指定事件类型. 从上面定义可以看出此方法和trigger()方法功能上很类似,但还是有巨大区别.以下是主要区别: 1.此方法不会触发浏览器默认事件. 2.此方法触发jQuery对象集合中第一个元素的事件处理函数,不会产生事件冒泡. 3.此方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象. 语法结构: 复制代码 代码如下: $(selector).t

  • jQuery中appendTo()方法用法实例

    本文实例讲述了jQuery中appendTo()方法用法.分享给大家供大家参考.具体分析如下: 此方法把匹配的元素插入指定元素结尾,插入位置在元素的内部. appendTo()方法的作用和append()方法是相同的,但是语法是不同的,尽管形式一样. 语法结构: 复制代码 代码如下: $(selector).appendTo(content) 参数列表: 参数 描述 selector 要被插入的匹配元素. content 要被插入匹配元素的元素. 实例代码: 复制代码 代码如下: <!DOCTY

  • jQuery中map()方法用法实例

    本文实例讲述了jQuery中map()方法用法.分享给大家供大家参考.具体分析如下: 此方法将一组元素转换成其他数组(不论是否是元素数组). 可以用这个函数来建立一个列表,不论是值.属性还是CSS样式,或者其他特别形式. 语法结构: 复制代码 代码如下: $("selector").map(function) 参数列表: 参数 描述 function 给每个元素执行的函数 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <h

  • jQuery中prevAll()方法用法实例

    本文实例讲述了jQuery中prevAll()方法用法.分享给大家供大家参考.具体分析如下: 此方法查找匹配元素集合之前所有的同辈元素. 同辈元素集合可以通过选择器进行筛选. 语法结构: 复制代码 代码如下: $("selector").prevAll(expr) 参数列表: 参数 描述 expr 可选.用于过滤的表达式. 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta cha

  • jQuery中innerHeight()方法用法实例

    本文实例讲述了jQuery中innerHeight()方法用法.分享给大家供大家参考.具体分析如下: 获取第一个匹配元素内部区域高度. 包括内补白(padding).不包括边框border). 也就是说内部区域的宽度等于width和padding之和. 此方法对可见和隐藏元素均有效. 可以结合innerWidth()方法学习. 语法结构: 复制代码 代码如下: $(selector).innerHeight() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html

  • jQuery中die()方法用法实例

    本文实例讲述了jQuery中die()方法用法.分享给大家供大家参考.具体分析如下: 此方法移除所有通过live()方法向指定元素添加的一个或多个事件处理程序. 语法结构: 复制代码 代码如下: $(selector).die(type,function) 参数列表: 参数 描述 type 可选.定义附加到元素的一个或多个事件类型.由空格分隔多个事件值. function 定义当事件发生时运行的函数. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html>

  • jQuery中data()方法用法实例

    本文实例讲述了jQuery中data()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以向匹配元素附加数据,或者从匹配元素获取数据. 语法结构一: 复制代码 代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-

随机推荐