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

坚果3年前网站工具1307
<!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 Blog 网站 原创文章,拒绝暴力转载。

相关文章

Facebook必须完成公共主页发布授权是怎么回事,怎么修复?

Facebook必须完成公共主页发布授权是怎么回事,怎么修复?

遇到的公共主页发布授权问题这个是Facebook里面遇到的问题,主要问题是:Facebook主页身份发帖或者给帖子点赞评论的时候,提示“必须完成公共主页发布授权”,说是公共主页的帖子被大量用户浏览,因...

Hotmail更改验证邮箱:确保邮件服务的顺畅运作

Hotmail更改验证邮箱:提升安全保障的重要步骤在今天的数字时代,电子邮件已经成为我们生活和工作的不可或缺的一部分。Hotmail,作为全球最大的邮件服务提供商之一,为数以亿计的用户提供着电子邮件通...

邮箱验证码验证的步骤:简化您的电子邮件安全

如何验证邮件:一步步教你检查邮箱验证码随着互联网的普及,电子邮件已成为我们日常生活和工作中不可或缺的一部分。我们使用电子邮件发送和接收重要的信息,包括账户密码重置、交易确认和订阅更新等。然而,电子邮件...

ID邮箱验证: 防范身份盗窃的重要步骤

ID邮箱验证: 保护您的账户安全在数字时代,我们越来越多地依赖于互联网来处理我们的金融交易、社交互动和敏感信息传输。因此,保护我们的个人身份和隐私变得至关重要。ID邮箱验证是一项关键的安全措施,可以帮...

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

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

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

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

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

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

发表评论    

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