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

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


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

相关文章

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

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

如何有效管理和保障163邮箱登录验证码

163邮箱登录验证码是保护你的电子邮件账户安全的关键。在今天的数字时代,电子邮件是我们生活和工作的不可或缺的一部分。163邮箱,作为中国最大的电子邮件服务提供商之一,每天都处理着大量的电子邮件通信。然...

创业者必读:外贸建站的费用与策略

外贸建站的必要性与优势在当今全球化的商业环境下,外贸成为越来越多企业拓展业务的选择。而拥有一个专业的外贸独立站点是扩展海外市场不可或缺的一环。那么,建立一个外贸独立站究竟需要多少钱呢?本文将从不同角度...

Win10系统无法搜索到蓝牙设备并连接蓝牙

这个问题我遇到之后花了点时间去去测试和研究,明明正在搜索蓝牙设备,但是连手机开的蓝牙都搜索不到,也就是没有蓝牙搜索结果。更新了蓝牙驱动也不行。重启电脑也不行。我的是台式电脑,之前win7的时候可以连接...

如何在JavaScript中有效验证电子邮件地址

随着互联网的广泛应用,电子邮件已成为我们生活中不可或缺的一部分。无论是用于个人通信还是商业用途,电子邮件都扮演着至关重要的角色。然而,为了保护用户隐私和数据安全,开发人员需要确保在他们的网站上正确验证...

EDM营销是什么、功能是什么、EDM未来趋势?

EDM营销是什么、功能是什么、EDM未来趋势?

EDM=电子邮件营销EDM 即 Email Direct Marketing,是我们熟知的电子邮件营销。EDM营销指的是使用电子直邮(Email Direct Marketing)向潜在或现有客户发送...

发表评论    

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