寻求HTML代码A在B前但浏览器渲染B在A前的示例（含JS/非JS）

一、纯CSS实现（无JavaScript） #

利用CSS弹性布局的order属性或方向反转属性，就能让HTML里靠前的元素在渲染时靠后显示。

方案1：使用order属性 #

<div style="display: flex; flex-direction: column;">
  <h1 style="order: 2;">A</h1>
  <h1 style="order: 1;">B</h1>
</div>

说明：HTML结构中A在B之前，但通过给A设置order: 2、B设置order: 1，弹性容器会按order值从小到大排列元素，最终渲染时B会显示在A前面。

方案2：使用flex-direction反转顺序 #

<div style="display: flex; flex-direction: column-reverse;">
  <h1>A</h1>
  <h1>B</h1>
</div>

说明：直接将弹性容器的排列方向设为纵向反转，容器内所有元素的渲染顺序会和HTML结构顺序完全相反。

二、JavaScript实现 #

通过DOM操作修改元素的插入位置，实现渲染顺序反转。

代码示例 #

<div id="container">
  <h1 id="textA">A</h1>
  <h1 id="textB">B</h1>
</div>

<script>
const container = document.getElementById('container');
const textA = document.getElementById('textA');
const textB = document.getElementById('textB');

// 将B元素插入到A元素的前面
container.insertBefore(textB, textA);
</script>

说明：HTML结构里A在B之前，JavaScript通过insertBefore方法调整DOM节点位置，最终浏览器渲染时B会显示在A的前面。

内容的提问来源于stack exchange，提问作者john