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

坚果11个月前网站工具673
<!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里面记得把 # 换成 . 才能执行成功。


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

相关文章

外贸独立站建设费用解析:建站投入与回报

建一个外贸独立站大约多少钱?——了解网站建设的成本在现代数字化时代,拥有一个外贸独立站已经成为国际贸易的一个重要方面。然而,很多初入这一领域的人都会问同一个问题:“建一个外贸独立站大约多少钱?” 这是...

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

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

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

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

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

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

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

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

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

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

优化外贸网站建设推广策略:提升全球可见度

外贸网站建设推广:打开国际市场的新大门在全球化的今天,外贸行业已经成为了许多企业拓展业务的重要途径。为了在国际市场上获得成功,外贸网站建设推广变得尤为关键。本文将深入探讨外贸网站建设推广的策略和技巧,...

发表评论    

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