javascriptで位置移動をしたい

<p class="test">あいうえお</p>
<div class="test1">かきくけこ</div>

上記のようなものがあった時

あいうえお
かきくけこ

という見え方になると思いますが、
これをhtmlを触らずにjavascriptで

かきくけこ
あいうえお

と逆にすることってできますでしょうか？
testをtest1の後ろへもっていくという感じにしたいです。

行動規範の内容に同意します

回答2件

下記でそれっぽくは出来ました。※ブラウザ：Chrome

javascript
1    a = document.getElementsByClassName('test')[0].getBoundingClientRect().left;
2    b = document.getElementsByClassName('test')[0].getBoundingClientRect().top;
3    c = document.getElementsByClassName('test1')[0].getBoundingClientRect().left;
4    d = document.getElementsByClassName('test1')[0].getBoundingClientRect().top;
5    // 8 16 8 56
6
7
8    document.getElementsByClassName('test')[0].style.position = "absolute";
9    document.getElementsByClassName('test')[0].style.left = c + 'px';
10    document.getElementsByClassName('test')[0].style.top = d + 'px';
11    document.getElementsByClassName('test1')[0].style.position = "absolute";
12    document.getElementsByClassName('test1')[0].style.left = a + 'px';
13    document.getElementsByClassName('test1')[0].style.top = b + 'px';
14    // 8 72 8 16

投稿2021/06/30 12:30

meg_

総合スコア10605

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <script>
9        window.addEventListener('DOMContentLoaded', () => {
10
11            const testElements = document.querySelector('.test');
12            const test1Elements = document.querySelector('.test1');
13
14            test1Elements.parentNode.insertBefore(testElements, test1Elements.nextSibling);
15
16        });
17    </script>
18</head>
19<body>
20    <p class="test">あいうえお</p>
21    <div class="test1">かきくけこ</div>
22</body>
23</html>