Jquery:prepend() VS before() 和 append() VS after()，它们之间有什么区别？ [复制]答案

【问题标题】：Jquery:prepend() VS before() and append() VS after(), what's differences between them? [duplicate]Jquery:prepend() VS before() 和 append() VS after()，它们之间有什么区别？ [复制]
【发布时间】：2016-03-11 21:27:36
【问题描述】：

为什么下面的代码不起作用，但是在我使用before() 和after() 替换 prepend 和 append 后它会起作用。

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("img").prepend("<b>Before</b>");
  });

  $("#btn2").click(function(){
    $("img").append("<i>After</i>");
  });
});
</script>
</head>

<body>
<img src="/images/logo.png" >
<br><br>
<button id="btn1">Insert before</button>
<button id="btn2">Insert after</button>
</body>
</html>

Thanks,
Ethan

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

<img /> 是一个空标签，这意味着不能附加或前置任何内容。因此，您需要在它之前或之后插入新的 HTML。这就是为什么append() 和prepend() 都不起作用，但before() 起作用的原因，因为它将内容放在<img 标记之前而不是其中。

div 的更好示例：

<!-- Our Target -->
<div class="myDiv">Hello, World!</div>

<!-- Prepend("Hi: ") -->
<div class="myDiv">Hi: Hello, World!</div>

<!-- Append(" - Praveen ") -->
<div class="myDiv">Hello, World! - Praveen</div>

<!-- Before("Hi:) -->
Hi:
<div class="myDiv">Hello, World!</div>

希望以上内容能让您了解这三个功能。

【讨论】：

非常感谢，Praveen。我现在清楚了。
@Ethan 请点击我的答案旁边的勾选按钮接受它。

【解决方案2】：

因为 prepend 尝试将其放在 <img> 标记中的所有内容之前，而 before() 将其放置在 <img> 标记之前。

【讨论】：

现在正是，谢谢 L.