input-Feld mit parent-Element umhüllen?

[Orlok]

Hallo MudGuard

Ich habe recherchiert, aber nicht gefunden, wie ich ein vorhandenes Element (input) in ein parent-Element einhüllen könnte.

parentElement.appendChild(input);

Da ein Element nur ein parent haben kann, wird es dabei automatisch aus dem ursprünglichen parent ausgehängt.

Damit ist allerdings auch die ursprüngliche Position des Elements verloren. Das ist ja meistens nicht das, was man erreichen möchte.

Angenommen, wir hätten die folgende Struktur …

<section>

    <h2>Beispiel</h2>

    <p>a</p>
    <p>b</p>
    <p>c</p>

</section>

… und wollten den ersten Absatz in ein div hüllen.

const {parentElement} = p;

div.appendChild(p);

parentElement.appendChild(div);

Würden wir dabei so wie oben vorgehen, dann würde das div und der von ihm eingeschlossene Absatz als letztes Kind von section einsortiert.

<section>

    <h2>Beispiel</h2>

    <p>b</p>
    <p>c</p>

    <div>
        <p>a</p>
    </div>

</section>

Besser wäre es, zunächst den Absatz durch das div zu ersetzen und ihn danach zu dessen Kindelement zu machen.

p.replaceWith(div);

div.appendChild(p);

Die Referenz auf das Elternelement wäre in diesem Fall entbehrlich.

Durch den Aufruf der Methode replaceWith werden an der Position des Kontextobjektes in der Liste der Kindknoten des Elternelements die als Argumente übergebenen Knoten oder Zeichenketten eingefügt.^[1]

<section>

    <h2>Beispiel</h2>

    <div>
        <p>a</p>
    </div>

    <p>b</p>
    <p>c</p>

</section>

Wenn die Transformation auch in älteren Browsern wie dem Internet Explorer funktionieren soll, könnte stattdessen auch die Methode replaceChild verwendet werden.

var parentElement = p.parentElement;

parentElement.replaceChild(div, p);

div.appendChild(p);

Anders als bei replaceWith wird hier eine Referenz auf das Elternelement benötigt und es kann nur ein einzelner Knoten als Ersatz angegeben werden.^[2]

Viele Grüße,

Orlok

---

1. Strings werden automatisch in Textknoten umgewandelt. ↩︎

2. Wollte man anders als in dem Beispiel mehrere Knoten einfügen, würde es sich anbieten, diese zunächst einem DocumentFragment hinzuzufügen. ↩︎