那有木有考虑过append/prepend和after/before有什么区别呢？

append

<p>
  <span class="s1">s1</span></p><script>$("p").append('<span class="s2">s2</span>');</script>

<p>
  <span class="s1">s1</span>
  <span class="s2">s2</span></p>

after

<p>
  <span class="s1">s1</span></p><script>$("p").after('<span class="s2">s2</span>');</script>

结果是这样的:

<p>
  <span class="s1">s1</span></p><span class="s2">s2</span>

总结：

append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加。

参数可以是个 list:

function afterText(){    var txt1="<b>I </b>";                    // 使用 HTML 创建元素    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素    var txt3=document.createElement("big");  // 使用 DOM 创建元素    txt3.innerHTML="jQuery!";    $("img").after([txt1,txt2,txt3]);          // 在图片后添加文本}