jquery after append appendTo三个函数的区别

jq文档的说明是
1、after函数
定义和用法:
after() 方法在被选元素后插入指定的内容。

语法:
$(selector).after(content)

实例:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
  $("button").click(function(){
    $("span").after("<a href="#">ddddd</a>")
  })
})
</script>
</head>
<body>
<span>aaaaaaaaaaaaaaa</span>
<button>after函数</button>
</body>
</html>
结果如下:
<span>aaaaaaaaaaaaaaa</span>
<a href="#">ddddd</a>
span标签后面多了一个a标签

2、append函数
定义和用法:
append() 方法在被选元素的结尾(仍然在内部)插入指定内容。

语法:
$(selector).append(content)

实例:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
  $("button").click(function(){
    $("span").append("<a href="#">ddddd</a>")
  })
})
</script>
</head>
<body>
<span>aaaaaaaaaaaaaaa</span>
<button>after函数</button>
</body>
</html>

结果如下:

<span>aaaaaaaaaaaaaaa<a href="#">ddddd</a></span>
span标签里面多了一个a标签

3、appendTo函数
定义和用法:
appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。

语法:
$(content).appendTo(selector)实例:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
  $("button").click(function(){
   // $("span").appendTo("<a href="#">ddddd</a>"),这样的写法是不正确的
$("<a href="#">ddddd</a>").appendTo("span")
  })
})
</script>
</head>
<body>
<span>aaaaaaaaaaaaaaa</span>
<button>after函数</button>
</body>
</html>

结果如下:

<span>aaaaaaaaaaaaaaa<a href="#">ddddd</a></span>
span标签里面多了一个a标签
效果和append函数是一样,只不过它们的写法是反着来写的而已

备注:before函数与after函数相反,表示是元素的前面加入指定元素
时间: 2024-10-10 00:33:45

jquery after append appendTo三个函数的区别的相关文章

jquery after append appendTo三个函数的区别(转)

1.after函数 定义和用法: after() 方法在被选元素后插入指定的内容. 语法: $(selector).after(content) 实例: <html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$().ready(f

after、append和appendTo三个函数的区别

jq文档的说明是 1.after函数 定义和用法: after() 方法在被选元素后插入指定的内容. 语法: $(selector).after(content) 实例: <html><head> <script type="text/JavaScript" src="/jQuery/jquery.js"></script> <script type="text/javascript">

jQuery中提供的三个函数:map,each,trim

jQuery中提供的三个函数: map,each,trim $.map(arry,callback(element,index)); 对于数组array中的每个元素,调用callback()函数,最终返回一个新的数组.原数组不变. 源码 // arg is for internal usage only map: function( elems, callback, arg ) { var length, value, i = 0, ret = []; // Go through the arr

jQuery height()、innerHeight()、outerHeight()函数的区别详解

jQuery height().innerHeight().outerHeight()函数的区别详解 在jQuery中,获取元素高度的函数有3个,它们分别是height(). innerHeight().outerHeight(). 与此相对应的是,获取元素宽度的函数也有3个,它们分别是width(). innerWidth().outerWidth(). 在这里,我们以height().innerHeight().outerHeight()3个函数为例,来详细介绍它们之间的区别. 下面我们以元

jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之间的区别

jQuery中有一个很关键的元素操作,他们的使用方法都一样,但是呈现的结果有所不同. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>test</title> <script src="jquery.js"></script> </head> <

jquery源码分析(三)——工具函数

jQuery.extend({ expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),//生成字符串,使用Math.random生成随机数并使用正则去掉了非数字字符. //这里它作为HTMLElement或JS对象的属性名 isReady: true, error: function( msg ) { throw new Error( msg ); }, noop: function

jQuery中append(),prepend()与after(),before()的区别

在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素的作用,容易混淆. 要想搞清楚他们之间的区别. 首先我们要明白这几个函数各自的作用. 一.append()和prepend()的作用 append()用于在被选元素的结尾插入元素. prepend()用于在被选元素的开头插入元素. 重点在于黑体字--被选元素的, 也就是说这两个函数的添加都是添加到元

jQuery height()、innerHeight()、outerHeight()函数的区别

参考: http://www.365mini.com/tech 函数 高度范围 jQuery版本 支持写操作 height() height 1.0+ 1.0+ innerHeight() height + padding 1.2.6+ 1.8.0+ outerHeight() height + padding + border 1.2.6+ 否 outerHeight(true) height+padding+border+margin 1.2.6+ 否

Javascript Math ceil()、floor()、round()三个函数的区别

Round是四舍五入的...Ceiling是向上取整..float是向下取整  下面来介绍将小数值舍入为整数的几个方法:Math.ceil().Math.floor()和Math.round(). 这三个方法分别遵循下列舍入规则:◎Math.ceil()执行向上舍入,即它总是将数值向上舍入为最接近的整数:◎Math.floor()执行向下舍入,即它总是将数值向下舍入为最接近的整数:◎Math.round()执行标准舍入,即它总是将数值四舍五入为最接近的整数(这也是我们在数学课上学到的舍入规则).