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

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


本文版权归坚果 跨境。转载请注明出处。

相关文章

outlook怎么收取gmail邮箱的IMAP邮件?不能收取了

outlook怎么收取gmail邮箱的IMAP邮件?不能收取了

我查阅了一下outlook的文档:不再支持在 Outlook 网页版中连接其他电子邮件帐户,如Gmail重要: Microsoft 已于 2018 年 9 月移除了使用已连接帐户功能向 Ou...

开发信的新趋势:外贸福步论坛经验分享

外贸福步论坛怎样写开发信:成功的关键步骤在如今竞争激烈的国际贸易市场中,写开发信是一项至关重要的任务。外贸福步论坛为许多贸易专业人士提供了宝贵的资源,帮助他们成功地与潜在客户建立联系。在本文中,我们将...

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

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

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

腾讯云怎么做首次备案和后续新增备案流程,需要注意的事项

首次备案:网站不能被访问,也就是关站备案。如果在备案的时候发现网站可以被打开,连腾讯云这一关都过不了,会打电话让你修改的。但是可以使用二级域名开发和发展网站内容。视频认证一定要白色背景墙。手机号不能被...

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

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

如何让html页面加载时就调换两个p/span/div的位置

如何让html页面加载时就调换两个p/span/div的位置

<!DOCTYPE html> <html> <head> <meta charset="utf-8">...

发表评论    

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