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

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


版权所属:坚果跨境。禁止转载。

相关文章

为何外贸企业需自建网站?

外贸自建站有哪些平台?我相信这是很多外贸企业主都感到困惑的问题。随着全球化和互联网技术的不断发展,外贸行业的竞争也越来越激烈。为了有效宣传产品和服务,越来越多的外贸企业开始自建站点来展示企业实力和产品...

thinkphp5操作更新数据库的时候提示没有更新条件

thinkphp5操作更新数据库的时候提示没有更新条件

thinkphp5操作更新数据库的时候提示没有更新条件解决流程如下:调试检查错误,采用设置断点和打印的方式检查打印出如下的内容,检查到错误如下,是cateid的值错误。所以是cateid的传值有问题。...

阿里云的香港服务器需要备案?无法访问被墙

阿里云的香港服务器需要备案?无法访问被墙

我前几天买了一个阿里云的香港轻量云服务器。所有东西都配置好了,结果发现网站被墙,无法访问。当时立刻就找了阿里云的客服寻求帮助。阿里云客服回复说:查看端口是通的,香港属于境外网络环境,在大陆访问会出现较...

阿里云腾讯云服务器是按包年包月划算还是按带宽计费按流量计费

阿里云腾讯云服务器是按包年包月划算还是按带宽计费按流量计费

你在准备购买阿里云或者腾讯云的云服务器的时候,是否有考虑减少购买成本,比如对比价格、对比型号、对比采购时长的价格优惠等,如果你对以上感兴趣,那么我相信你应该也对下面的不同计费模式感兴趣。因为不同的计费...

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

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

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

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

发表评论    

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