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

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


本文由坚果·跨境发布,转载请署名。

相关文章

ChatGPT输出到一半就停止了是什么原因,输出内容不完整

Chat GPT 是一个令人惊叹的工具,它能够从以前的对话中记住信息,这是它特别出色的地方。但是,这也有一个限制!根据 OpenAI 的说法,Chat GPT 的最大文本长度为 3000 个单词。换句...

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

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

解决GTA 5邮箱验证问题的实用指南

GTA 5怎么验证邮箱?完整步骤一网打尽GTA 5是一款备受欢迎的开放世界游戏,让玩家可以在虚拟的洛杉矶市内尽情探索。但是,要进入游戏并享受其中的所有功能,你可能需要验证你的邮箱地址。这个过程有时可能...

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

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

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

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

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

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

为什么需要查邮箱验证码?

随着电子邮件在我们日常生活中的普及,邮箱验证码变得愈加重要。无论您是注册新账户、找回密码、或进行重要的安全验证,邮箱验证码都扮演着关键的角色。本文将深入探讨如何查找邮箱验证码,为什么需要这么做,以及如...

发表评论    

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