Elemente im DOM verschieben

22. April 2020

Wie du Elemente im DOM ganz einfach hin und her verschiebst.

Gehen wir von folgendem HTML Code aus:

<section>
    <h1>Hello World</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam possimus expedita aliquid sit eveniet impedit qui dolorem deleniti magni magnam?</p>
</section>

<div class="absolute">
    <img src="..." alt="Bild">
</div>

Lass uns die div.absolute in die section verschieben:

const div_absolute = document.querySelector('div');
document.querySelector('section').appendChild(div_absolute);

Unsere div ist nun das letzte Kind der section. Lass uns die div wieder in die section verschieben. Dieses Mal soll sie aber an erster Stelle stehen (ausgehend von Originalzustand):

const div_absolute = document.querySelector('div');
const section = document.querySelector('section');

section.insertBefore(div_absolute, section.firstElementChild);

Tada, unsere div ist jetzt an erster Stelle in der section. Lies dich hier schlauer über nodes: https://developer.mozilla.org/en-US/docs/Web/API/Node.

zurück zu allen Beiträgen