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

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


版权所属:坚果跨境。禁止转载。

相关文章

Zblog修改后台样式之后网站没有更新怎么办

Zblog修改后台样式之后网站没有更新怎么办

Zblog在后台修改了设置,但是网站没有显示更新,这个问题一般是网站缓存的问题。比较简单。可以在Zblog系统后台的首页点击刷新缓存文件。按钮位置如下:...

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

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

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

分享两个自用的PayPal费用计算器,在线使用完全免费

分享两个自用的PayPal费用计算器,在线使用完全免费

这里提到的是一个贝宝(PayPal)费用计算器,可以显示使用贝宝(PayPal)账户进行某些操作所需支付的费用。这个工具可以帮助人们检查运行贝宝账户时可能需要支付的转换和其他费用,从而更好地管理预算。...

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

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

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

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

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

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

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

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

发表评论    

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