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

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


本文由坚果·跨境发布,转载请署名。

相关文章

HTML如何在DIV右上角添加可隐藏的按钮

HTML如何在DIV右上角添加可隐藏的按钮

下面的代码实现了如何在div的右上角设置一个button按钮,当鼠标划过div的时候,button按钮显示,当鼠标划出div的时候,button按钮消失。这个方法除了可以设置div之外,设置img、p...

提高效率的关键:网易邮箱批量验证的最佳实践

在当今数字化世界中,电子邮件已经成为人们工作和生活的不可或缺的一部分。而网易邮箱作为中国领先的电子邮件服务提供商,受到了广泛的使用。然而,对于许多业务和组织来说,需要处理大量的电子邮件地址,以进行市场...

跨境独立站平台建站:115Shop vs. WooCommerce vs. BigCommerce vs. Magento

选择最佳平台:跨境独立站建站的关键考虑因素在当今数字化时代,跨境电商行业蓬勃发展,让越来越多的企业看到了在全球市场获得成功的机会。要进入这个竞争激烈的领域,建立一个强大的跨境独立站是至关重要的。然而,...

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

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

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

实测:阿里云新加坡和腾讯云孟买服务器的网站访问加载速度

实测:阿里云新加坡和腾讯云孟买服务器的网站访问加载速度

我自己搭建了两个一样的网站,在阿里云新加坡轻量服务器做了一个,在腾讯云孟买轻量服务器做了一个。先上截图,分析在下面:在两个测速网站都进行了测速。先看17ce的测速结果:阿里云新加坡轻量服务器的表现:再...

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

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

发表评论    

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