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

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


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

相关文章

Reddit是什么网站,是做什么的,有什么用途?

Reddit是什么网站,是做什么的,有什么用途?

有很多网友不知道Reddit到底是什么网站,这个网站是做什么的,对普通用户来说有什么用途。下面我们简单来看下。简单介绍一下,小编我是品牌的站外推广运营,其中包括了Reddit运营,负责公司品牌在Red...

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

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

腾讯云怎么做首次备案和后续新增备案流程,需要注意的事项

首次备案:网站不能被访问,也就是关站备案。如果在备案的时候发现网站可以被打开,连腾讯云这一关都过不了,会打电话让你修改的。但是可以使用二级域名开发和发展网站内容。视频认证一定要白色背景墙。手机号不能被...

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

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

jQuery创建div/p元素的多种方式,多层元素嵌套的方法

jQuery创建div/p元素的多种方式,多层元素嵌套的方法

jQuery创建div/p元素的多种方式,多层元素嵌套的方法<!DOCTYPE html> <html> <head> <meta ...

外贸独立站建设费用解析:建站投入与回报

建一个外贸独立站大约多少钱?——了解网站建设的成本在现代数字化时代,拥有一个外贸独立站已经成为国际贸易的一个重要方面。然而,很多初入这一领域的人都会问同一个问题:“建一个外贸独立站大约多少钱?” 这是...

发表评论    

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