javascript - .append()、prepend()、.after() 和 .before()

Question

我非常精通编码，但时不时会遇到一些看起来基本相同的代码。我的主要问题是，为什么要使用 .append() 而不是 .after() 或反之亦然？

我一直在寻找，但似乎无法明确定义两者之间的区别以及何时使用它们以及何时不使用它们。

一个比另一个有什么好处，为什么我要使用一个而不是另一个？有人可以向我解释一下吗？

var txt = $('#' + id + ' span:first').html();
$('#' + id + ' a.append').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').append(txt);
});
$('#' + id + ' a.prepend').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').prepend(txt);
});
$('#' + id + ' a.after').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').after(txt);
});
$('#' + id + ' a.before').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').before(txt);
});

Answer 1

见:

---

.append() 将数据放入元素中 last index 和
.prepend() 将前置元素放在 first index

---

假设:

<div class='a'> //<---you want div c to append in this
  <div class='b'>b</div>
</div>

当 .append() 执行时，它将如下所示:

$('.a').append($('.c'));

执行后:

<div class='a'> //<---you want div c to append in this
  <div class='b'>b</div>
  <div class='c'>c</div>
</div>

---

Fiddle with .append() in execution.

---

当 .prepend() 执行时，它将如下所示:

$('.a').prepend($('.c'));

执行后:

<div class='a'> //<---you want div c to append in this
  <div class='c'>c</div>
  <div class='b'>b</div>
</div>

---

Fiddle with .prepend() in execution.

---

.after() 将元素放在元素之后
.before() 将元素放在元素之前

---

使用后:

$('.a').after($('.c'));

执行后:

<div class='a'>
  <div class='b'>b</div>
</div>
<div class='c'>c</div> //<----this will be placed here

---

Fiddle with .after() in execution.

---

之前使用:

$('.a').before($('.c'));

执行后:

<div class='c'>c</div> //<----this will be placed here
<div class='a'>
  <div class='b'>b</div>
</div>

---

Fiddle with .before() in execution.

---