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.