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

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


本文由 NutBlog 网站首发,禁止转载。

相关文章

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

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

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

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

Thinkphp网站安装部署之后访问网站首页404 Not Found

Thinkphp网站安装部署之后访问网站首页404 Not Found

今天我把Thinkphp网站安装部署之后,发现我的网站在访问网站首页的时候出现了404 Not Found的错误。我检查了一下,没有发现配置问题。在宝塔里面我的网站运行目录设置的是public,域名解...

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

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

网站主题选择与国外独立网站建设

国外独立网站如何建站:基础知识和步骤在这个数字时代,国外独立网站的建立成为了许多人的梦想。无论是个人博客、在线商店还是专业服务网站,建立自己的网站可以带来巨大的满足感和潜在的收益。但是,要成功建立一个...

Win10系统无法搜索到蓝牙设备并连接蓝牙

这个问题我遇到之后花了点时间去去测试和研究,明明正在搜索蓝牙设备,但是连手机开的蓝牙都搜索不到,也就是没有蓝牙搜索结果。更新了蓝牙驱动也不行。重启电脑也不行。我的是台式电脑,之前win7的时候可以连接...

发表评论    

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