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

坚果3年前 (2023-06-19)网站工具1163

<!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>
$(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>

页面加载的时候就是已经调换顺序的了：

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

返回列表

上一篇：Facebook完成公共主页发布授权的解封验证需要多久几天

下一篇：外贸单独站的优势大揭秘！掌握必备技能轻松开展业务！

相关文章

Thinkphp网站安装部署之后访问网站首页404 Not Found

Thinkphp网站安装部署之后访问网站首页404 Not Found

今天我把Thinkphp网站安装部署之后，发现我的网站在访问网站首页的时候出现了404 Not Found的错误。我检查了一下，没有发现配置问题。在宝塔里面我的网站运行目录设置的是public，域名解...

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

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

jQuery创建div/p元素的多种方式，多层元素嵌套的方法

jQuery创建div/p元素的多种方式，多层元素嵌套的方法

jQuery创建div/p元素的多种方式，多层元素嵌套的方法<!DOCTYPE html> <html> <head> <meta ...

超级干货：独立站建站SAAS平台对比汇总优缺点shopify/shopyy/shopline/店匠/Wix等

超级干货：独立站建站SAAS平台对比汇总优缺点shopify/shopyy/shopline/店匠/Wix等

本图表依次显示了下面的跨境电商建站平台：shoplineshopifyueeshopshoptagoshopyyshoplazza店匠xshoppyWixBigCommerceEcomzPinnacl...

网站主题选择与国外独立网站建设

国外独立网站如何建站：基础知识和步骤在这个数字时代，国外独立网站的建立成为了许多人的梦想。无论是个人博客、在线商店还是专业服务网站，建立自己的网站可以带来巨大的满足感和潜在的收益。但是，要成功建立一个...

开发信的新趋势：外贸福步论坛经验分享

外贸福步论坛怎样写开发信：成功的关键步骤在如今竞争激烈的国际贸易市场中，写开发信是一项至关重要的任务。外贸福步论坛为许多贸易专业人士提供了宝贵的资源，帮助他们成功地与潜在客户建立联系。在本文中，我们将...

发表评论