用JS/JQuery调换两个div/p/span的顺序

坚果3年前网站工具1168
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用JS/JQuery调换两个div/p/span的顺序</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var $one = $("#one"); 
        var $two = $("#two"); 
        $two.insertBefore($one);
    });
});
</script>
</head>
<body>

<button>调换顺序按钮</button>
<br><br>
<p id="one">这是第一个段落。</p>
<p id="two">这是第2个段落。</p>

</body>
</html>


按钮执行之前:


点击按钮,执行之后:



如果需要调换div或者span的话,方法是一样的,只要在对应容器中增加一个id即可。也可以改用class,但是前面js里面记得把 # 换成 . 才能执行成功。


本文版权归坚果博客网站。尊重原创。

相关文章

跨境电商和外贸必备7个EDM邮件营销系统

跨境电商和外贸必备7个EDM邮件营销系统

跨境电商必备的7个EDM邮件批量群发工具软件:以下是简单介绍7个EDM邮件营销系统,可以根据自己的习惯和需要选择使用:1. Mailchimp 跨境必备邮件营销工具Mailchimp是一种功能强大的E...

为何Figma邮箱验证如此重要

Figma邮箱验证: 一步一步教你如何验证你的邮箱在今天的数字时代,邮箱验证是保护用户帐户和信息安全的重要步骤之一。对于Figma用户来说,验证邮箱不仅有助于确保帐户的安全性,还可以享受到更多功能和服...

Reddit是什么网站,是做什么的,有什么用途?

Reddit是什么网站,是做什么的,有什么用途?

有很多网友不知道Reddit到底是什么网站,这个网站是做什么的,对普通用户来说有什么用途。下面我们简单来看下。简单介绍一下,小编我是品牌的站外推广运营,其中包括了Reddit运营,负责公司品牌在Red...

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

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

2k邮箱验证的必要性与方法

2k邮箱验证: 保障您的电子信箱安全在今天的数字时代,电子邮件已经成为人们日常生活中不可或缺的一部分。我们用它来与亲朋好友保持联系,处理工作事务,甚至接收账单和银行通知。然而,随着互联网的普及,电子邮...

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

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

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

发表评论    

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