Jquery:prepend()VS before()和append()VS after(),它们之间有什么区别?

时间:2015-12-07 10:01:06

标签: javascript jquery html

为什么以下代码不起作用,但在我使用after()<!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 替换前置和附加后,它将起作用。

{{1}}

2 个答案:

答案 0 :(得分:4)

<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>

希望以上内容澄清了这三个功能。

答案 1 :(得分:0)

由于prepend尝试在所有内容之前将其放在<img>标记中,并且before()将其放在<img>标记之前。