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

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


本文由 坚果跨境 原创,禁止暴力转载。

相关文章

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

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

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

独立站怎么搭建:选择最佳平台与工具

独立站怎么搭建?从零开始的完整指南在今天的数字时代,拥有自己的独立网站是一个强大的工具,不仅可以展示您的创意和内容,还可以成为一个赚取 passives 收入的途径。但是,许多人不知道从何开始。本文将...

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

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

有效方法:检查邮箱是否存在

如何查邮箱是否存在在今天的数字时代,电子邮件已经成为我们日常生活和工作中不可或缺的一部分。我们使用电子邮件来与朋友、家人和同事保持联系,接收重要的通知,以及参与在线社交和商务交流。然而,随着电子邮件的...

海外独立站的财务规划:多少钱是必要的?

海外独立站,多少钱?在数字时代,拥有一个海外独立站变得越来越重要,无论是作为个人品牌的一部分,还是企业扩展到国际市场的一种方式。但是,有一个关键问题需要回答:海外独立站需要多少钱?本文将深入探讨这个问...

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

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

发表评论    

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