如何用JS/JQuery在html的p/span前面加上新的内容/代码
Markup
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用Jquery在html的p标签前面加上一句话</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("<p>我是加的一句话</p>").insertBefore("p");
});
});
</script>
</head>
<body>
<button>点击此按钮在p标签前面加上一句话</button>
<br><br>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>执行之前：
点击按钮之后：
再次点击按钮之后：
如果想要添加一截span的话，可以把上面的一行代码改成：
JavaScript
<script>
$(document).ready(function(){
$("button").click(function(){
$("<span>我是加的一句话</span>").insertBefore("p");
});
});
</script>执行三次按钮之后是下面这样：
需要注意的是，该方法只能插入html的元素容器，不能直接放一段文字上去。那样添加不成功。
比如 ("<p>我是加的一句话</p>") 可以成功，但是("我是加的一句话")就无法成功。
本文首发地址：NutBlog.cn
