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

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


本文由 坚果-跨境 网站原创,转载请注明出处。

相关文章

如何创建有效的验证码邮件系统

验证码邮件的作用与重要性在数字时代,验证码邮件成为了日常生活中不可或缺的一部分。无论您是在注册新的社交媒体帐户、购物网站、或进行网上银行交易,验证码邮件都是确保您的在线安全的关键。本文将深入探讨验证码...

为什么需要查邮箱验证码?

随着电子邮件在我们日常生活中的普及,邮箱验证码变得愈加重要。无论您是注册新账户、找回密码、或进行重要的安全验证,邮箱验证码都扮演着关键的角色。本文将深入探讨如何查找邮箱验证码,为什么需要这么做,以及如...

outlook怎么收取gmail邮箱的IMAP邮件?不能收取了

outlook怎么收取gmail邮箱的IMAP邮件?不能收取了

我查阅了一下outlook的文档:不再支持在 Outlook 网页版中连接其他电子邮件帐户,如Gmail重要: Microsoft 已于 2018 年 9 月移除了使用已连接帐户功能向 Ou...

2k邮箱验证的必要性与方法

2k邮箱验证: 保障您的电子信箱安全在今天的数字时代,电子邮件已经成为人们日常生活中不可或缺的一部分。我们用它来与亲朋好友保持联系,处理工作事务,甚至接收账单和银行通知。然而,随着互联网的普及,电子邮...

信箱中的验证邮件:你绝对不能错过的内容

验证邮件在哪里看:完全指南在今天的数字时代,验证邮件已经成为我们在线生活的一部分。它们用于各种重要任务,如创建账户、重置密码和验证身份。但是,许多人发现自己迷失在电子邮件的海洋中,不知道验证邮件在哪里...

thinkphp5操作更新数据库的时候提示没有更新条件

thinkphp5操作更新数据库的时候提示没有更新条件

thinkphp5操作更新数据库的时候提示没有更新条件解决流程如下:调试检查错误,采用设置断点和打印的方式检查打印出如下的内容,检查到错误如下,是cateid的值错误。所以是cateid的传值有问题。...

发表评论    

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