Jquery基础：append、prepend、after、before、appendTo的区别

append() 是在被选元素的结束标签前面(即改被选元素的内部)插入指定内容。

<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标签

after() 是在被选元素的结束标签后面（即该被选元素的外部）插入指定的内容。

<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标签

appendTo() 仍然是在被选元素的结束标签前面(即改被选元素的内部)插入指定内容，只不过是jQuery函数的写法不太相同。

<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函数是一样，只不过它们的写法是反着来写的而已

pretend()和before()的区别与append()和after()的区别是一样的。

转载于:https://www.cnblogs.com/henuyuxiang/p/7411537.html

Jquery基础：append、prepend、after、before、appendTo的区别相关推荐

html中prependid的作用,jQuery中append(),prepend()与after(),before()的区别
在jQuery中,添加元素的方法有append(),prepend和 after(),before()两种共四个.但很多人对他们的使用有点混淆,今天就来分析一下.append()和prepend()的 ...
JQuery中append(function(index,html)),appendTo(),after(function(index,html)),clone()方法
不多说废话,直接说要点 1. append(function(index, html)) 该方法是版本1.4 中新增的,其功能是将一个function 函数作为append 方法的参数,该函数的功能 ...
用 JS 原生方法实现 jQuery 的 append, prepend, before, after
相当于 $(el).before('html' | element) el.insertAdjacentHTML('beforeBegin', 'html'); el.insertAdjacentEl ...
jquery中append、prepend、before、after方法使用
一.after()和before()方法的区别 after()--其方法是将方法里面的参数添加到jquery对象后面去: 如:A.after(B)的意思是将B放到A后面去: before()- ...
jquery after append appendTo三个函数的区别
jq文档的说明是 1.after函数定义和用法: after() 方法在被选元素后插入指定的内容. 语法: $(selector).after(content) 实例: <html> & ...
JQuery之append和appendTo的区别，还有js中的appendChild用法
JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择 ...
jQuery中append()和appendTo()的区别
[前言] 简单总结下jQuery中append()和appendTo()的区别 [主体] 1.简单理解 (插入对象不同) append()前面是被插入的对象,后面是要在对象内插入的元素内容 appen ...
jquery append()和appendTo() 的区别
append()和appendTo() 的区别 append() $(selector).append(content,function(index,html)) 在A的后面添加B content,可 ...
jquery中append、prepend, before和after方法的区别
1. append()和prepend() 假设 <div class='a'> //<---you want div c to append in this<div clas ...
【Java Web开发指南】JQuery基础笔记
文章目录 JQuery 基础: 1. JQuery 基础:1. 概念2. 快速入门3. JQuery对象和JS对象区别与转换4. 选择器5. DOM操作6. 案例 JQuery 基础: 1. 概念: ...

Jquery基础：append、prepend、after、before、appendTo的区别

append() 是在被选元素的结束标签前面(即改被选元素的内部)插入指定内容。

after() 是在被选元素的结束标签后面（即该被选元素的外部）插入指定的内容。

appendTo() 仍然是在被选元素的结束标签前面(即改被选元素的内部)插入指定内容，只不过是jQuery函数的写法不太相同。

pretend()和before()的区别与append()和after()的区别是一样的。

Jquery基础：append、prepend、after、before、appendTo的区别相关推荐

最新文章

热门文章