jQuery after（），append（），before（），prepend（）之间的区别

Question

我已将这些函数放入代码中，并分别制作了4个button来分别测试每个函数的功能。我的内容没有正确加载。附上代码以供参考。

$(function() {
  $("#b1").click(function() {
    $('.a').append('.c');
  });
  $("#b2").click(function() {
    $('.a').after('.c');
  });
  $("#b3").click(function() {
    $('.a').prepend('.c');
  });
  $("#b4").click(function() {
    $('.a').before('.c');
  });
});

.a {
  background-color: green;
}

.b {
  background-color: yellow;
}

.c {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='a'> a
  <div class='b'> b </div>
  <!-- <div class = 'c'> c </div> -->
</div>
<button id="b1" Append </button>
<button id="b2" After </button>
<button id="b3" Prepend </button>
<button id="b4" Before </button>

Answer 1

after()将元素放在元素之后
before()将元素放在元素之前
append()将数据放在最后一个索引的元素内
prepend()将前置的元素放在第一个索引

Answer 2

您错过了按钮的结束标记>。这就是为什么按钮无法正确显示的原因。

.append()将数据放在last index

的元素内

.prepend()将前置的符号放在first index

$(function() {
  $("#b1").click(function() {
    $('.a').append('.c');
  });
  $("#b2").click(function() {
    $('.a').after('.c');
  });
  $("#b3").click(function() {
    $('.a').prepend('.c');
  });
  $("#b4").click(function() {
    $('.a').before('.c');
  });
});

.a {
  background-color: green;
}

.b {
  background-color: yellow;
}

.c {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='a'> a
  <div class='b'> b </div>
  <!-- <div class = 'c'> c </div> -->
</div>
<button id="b1"> Append </button>
<button id="b2">After </button>
<button id="b3">Prepend </button>
<button id="b4"> Before </button>

Answer 3

$('.selector').after('<p>yourData<\p>')

将在关闭所选元素的标记后添加'<p>yourData<\p>'。

$('.selector').before('<p>yourData<\p>')

将在打开所选元素的标记之前添加'<p>yourData<\p>'。

$('.selector').append('<p>yourData<\p>')

将在关闭所选元素的标记之前添加'<p>yourData<\p>'。

$('.selector').prepend('<p>yourData<\p>')

将在打开所选元素的标记后完全添加'<p>yourData<\p>'。