Div an bestimmter Position einfügen

Question

Ich habe eine Liste von Div Elementen untereinander angeordnet. Wie kann ich ein neues Div an einer bestimmten Position einfügen?

<div id="liste">
    <div>Punkt 1</div>
    <div>Punkt 2</div>
    <div>Punkt 3</div>
    <div>Punkt 4</div>
</div>

Wie kann ich mit Javascript nach Punkt 3 jetzt ein neues Div einfügen?

Answer 1

Du kannst Javascript in Verbindung mit dem CSS Selektor "nth-child" benutzen.

// Finde das übergeordnete <div>-Element
var parentDiv = document.querySelector('div#liste');

// Finde das Element, nach dem du das neue <div> einfügen möchtest (in diesem Fall nach "Punkt 3")
var referenceElement = parentDiv.querySelector('div:nth-child(4)');

// Erstelle das neue <div>-Element
var newDiv = document.createElement('div');
newDiv.textContent = 'Neuer Punkt';

// Füge das neue <div>-Element ein
parentDiv.insertBefore(newDiv, referenceElement);

JSFiddle