如何用JS/JQuery在html的p/span前面加上新的内容/代码

坚果1个月前网站工具13
<!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>") 可以成功,但是("我是加的一句话")就无法成功。


本文由 坚果跨境 原创,禁止暴力转载。

相关文章

跨境电商和外贸必备7个EDM邮件营销系统

跨境电商和外贸必备7个EDM邮件营销系统

跨境电商必备的7个EDM邮件批量群发工具软件:以下是简单介绍7个EDM邮件营销系统,可以根据自己的习惯和需要选择使用:1. Mailchimp 跨境必备邮件营销工具Mailchimp是一种功能强大的E...

用JS/JQuery调换两个div/p/span的顺序

用JS/JQuery调换两个div/p/span的顺序

<!DOCTYPE html> <html> <head> <meta charset="utf-8">...

分享两个自用的PayPal费用计算器,在线使用完全免费

分享两个自用的PayPal费用计算器,在线使用完全免费

这里提到的是一个贝宝(PayPal)费用计算器,可以显示使用贝宝(PayPal)账户进行某些操作所需支付的费用。这个工具可以帮助人们检查运行贝宝账户时可能需要支付的转换和其他费用,从而更好地管理预算。...

亲测有效:钉钉电脑双开软件工具

亲测有效:钉钉电脑双开软件工具

【使用说明】:首次打开会弹出英文窗口, Talk.exe       pid: 【X1】·   type: Mutant  &nb...

​ChatGPT的输出最大字数是多少、字数限制?

如果你使用ChatGPT作为自己的人工智能写作助手,你可能会想:Chat GPT有单词限制吗?嗯,这个聊天机器人可以发送多少文本似乎没有固定的限制。因此,似乎没有严格的限制。然而,请记住,您在模型中输...

Zblog修改后台样式之后网站没有更新怎么办

Zblog修改后台样式之后网站没有更新怎么办

Zblog在后台修改了设置,但是网站没有显示更新,这个问题一般是网站缓存的问题。比较简单。可以在Zblog系统后台的首页点击刷新缓存文件。按钮位置如下:...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。