Logo

Elemente im DOM verschieben

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

22. April 2020

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.

« Alle Beiträge