如何用JS/JQuery在html的p/span前面加上新的内容/代码
<!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的话,可以把上面的一行代码改成:
<script> $(document).ready(function(){ $("button").click(function(){ $("<span>我是加的一句话</span>").insertBefore("p"); }); }); </script>
执行三次按钮之后是下面这样:
需要注意的是,该方法只能插入html的元素容器,不能直接放一段文字上去。那样添加不成功。
比如 ("<p>我是加的一句话</p>") 可以成功,但是("我是加的一句话")就无法成功。