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

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


本文由 NutBlog 网站首发,禁止转载。

相关文章

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

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

HTML如何在DIV右上角添加可隐藏的按钮

HTML如何在DIV右上角添加可隐藏的按钮

下面的代码实现了如何在div的右上角设置一个button按钮,当鼠标划过div的时候,button按钮显示,当鼠标划出div的时候,button按钮消失。这个方法除了可以设置div之外,设置img、p...

跨境独立站平台建站:115Shop vs. WooCommerce vs. BigCommerce vs. Magento

选择最佳平台:跨境独立站建站的关键考虑因素在当今数字化时代,跨境电商行业蓬勃发展,让越来越多的企业看到了在全球市场获得成功的机会。要进入这个竞争激烈的领域,建立一个强大的跨境独立站是至关重要的。然而,...

外贸网站建设推广公司的必备服务与优势

外贸网站建设推广公司一直以来都是在全球贸易中不可或缺的合作伙伴。在数字时代,网站已经成为企业进军国际市场的门户,而专业的外贸网站建设推广公司则是确保这扇门敞开的关键。本文将深入探讨外贸网站建设推广公司...

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

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

阿里云的香港服务器需要备案?无法访问被墙

阿里云的香港服务器需要备案?无法访问被墙

我前几天买了一个阿里云的香港轻量云服务器。所有东西都配置好了,结果发现网站被墙,无法访问。当时立刻就找了阿里云的客服寻求帮助。阿里云客服回复说:查看端口是通的,香港属于境外网络环境,在大陆访问会出现较...

发表评论    

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