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

时间：2021-04-22 20:32:26

jQuery中有一个很关键的元素操作,他们的使用方法都一样,但是呈现的结果有所不同.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<script src="jquery.js"></script>
</head>
<style>
  p {
    background-color: aquamarine;
}
</style>
<body>
<p id="n1">
<span id="n2">span#n2</span>n1    
</p>
<p id="n3">
<label id="n4" class="move">label#n4</label>n3
</p>
<p id="n5">
<span id="n6">span#n6</span>n5
</p>
<p id="n7">
<span id="n8">span#n8</span>n7
</p>
<p id="n9">
<span id="n10">span#n10</span>n9
</p>
<p id="n11">
<span id="n12">span#n12</span>n11
</p>
</body>
</html>

先新建一个jQuery div对象:

let newdiv = $('<div>new one</div>');

分别使用下列语句看看有什么效果

$('#n1').append(newdiv.clone());
newdiv.clone().insertAfter('#n1');
newdiv.clone().appendTo('#n3');
$('#n5').prepend(newdiv.clone());
$('#n5').insertBefore(newdiv.clone());
newdiv.clone().prependTo('#n7')
$('#n9').before(newdiv.clone());
newdiv.clone().before('#n9');
$('#n11').after(newdiv.clone());
newdiv.clone().after('#n11');

相信经过以上的代码你能够知道一些关系了:

1 To和不带To就是一个相反的关系

2 **pend是在p元素内末尾添加,成为p的last-child insert**是在p元素外添加,成为p的next,或first-sibling

3 A.before(B) = B.insertBefore(A) A.after(B) = B.insertAfter(A)效果上是相等的,但是返回值不一样,如果使用before返回的是A,如果是insert返回的是B

希望以上的总结能对你的理解有所帮助.

 

标签：

相关文章