HTML Custom Order?-CodePudding

I'm looking (for debugging purposes) for an example where text A appears before text B in HTML Code while B appears before A when being rendered in Browser.

An example that doesn't work:

<h1>A</h1>
<h1>B</h1>

Preferably 2 examples one using JS and one not using JS at all.

One try:

div.absolute {
    position: absolute;
    border: 3px solid #73AD21;
  }

<div >
  This div element has position: absolute;
</div>

<p> test </p>

CodePudding user response：

If you mean changing the orders you can try order property:

.flex {
  display: flex;
  flex-direction: column;
}

h1#foo {
  order: 2;
}

h1#bar {
  order: 1;
}

<div >
  <h1 id="foo">A</h1>
  <h1 id="bar">B</h1>
</div>

CodePudding user response：

Using CSS flex with direction column-reverse

.container {
  display: flex;
  flex-direction: column-reverse;
}

<div >
  <h1>A</h1>
  <h1>B</h1>
</div>

Or javascript, using insertBefore() to place B before A.

document.getElementById("A").parentNode.
insertBefore(
  document.getElementById("B"),
  document.getElementById("A")
);

<h1 id="A">A</h1>
<h1 id="B">B</h1>