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

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


本文作者 Nut ,转载标记出处。

相关文章

ChatGPT输出到一半就停止了是什么原因,输出内容不完整

Chat GPT 是一个令人惊叹的工具,它能够从以前的对话中记住信息,这是它特别出色的地方。但是,这也有一个限制!根据 OpenAI 的说法,Chat GPT 的最大文本长度为 3000 个单词。换句...

js/jQuery怎么添加div、button、p’等HTML元素的代码

通过jQuery设置HTML里面的div和button等代码。目的是实现HTML文件里面是空白body,然后body里面的内容全都是js实现输出的。最主要的是用到jQuery的构建html元素和app...

亲测有效:购买顺丰的优惠券套餐之后怎么全额退款

亲测有效:购买顺丰的优惠券套餐之后怎么全额退款

在微信小程序中,因为顺丰的优惠券弹窗有点多,点击之后一时头脑发热购买了一个5元的优惠券套餐,通过微信支付5块钱,获得几个3块钱的寄件优惠券。但是实际我暂时没有寄快递的需求,在一个优惠券都没有使用的情况...

如何在JavaScript中有效验证电子邮件地址

随着互联网的广泛应用,电子邮件已成为我们生活中不可或缺的一部分。无论是用于个人通信还是商业用途,电子邮件都扮演着至关重要的角色。然而,为了保护用户隐私和数据安全,开发人员需要确保在他们的网站上正确验证...

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

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

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

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

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

发表评论    

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