为什么以下代码不起作用,但在我使用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}}
答案 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>
标记之前。