JavaScript Element ins DOM zurückbringen bzw. Entfernung verhindern

[tel6]

Hallo,

ich habe ein DOM Element mit Inhalt, das beim Laden der Seite vorhanden ist.
Beispiel:

<div class="offcanvas">
    <div class="header">
        <h1>Hallo</>
    </div>
    <div class="content">
        <ul>
            <li>Link1</li>
            <li>Link2</li>
        </ul>
    </div>
</div>

Geöffnet wird es durch einen klassischen Button ".nav-button".

Dieses DOM Element wird anhand der Klasse ".offcanvas" leider durch das Schließen eines anderen DOM Elements, nämlich eines Modals, das sich ebenfalls auf der Seite befindet, komplett aus dem DOM entfernt. Beim neu Laden der Seite ist es natürlich wieder da und wenn der Besucher das Modal vorher nicht geöffnet und wieder geschlossen hat, ist das auch kein Problem.

Frage:
Gibt es eine Möglichkeit das Element nach Entfernen aus dem DOM bei Klick auf ".nav-button" einfach wieder in den DOM zurückzubringen?

Alternativ bzw. noch besser: Kann ich irgendwie verhindern, dass das Element aus dem DOM entfernt wird?

Ich könnte natürlich die CSS Klasse ".offcanvas" einfach umbenennen, jedoch ist das keine optimale Lösung, da dies andere Nachteile mit sich bringt (z.B. geht das komplette Styling verloren, usw.).

Das Verhalten des Modals (also, dass dieses mein DOM Element entfernt) kann bzw. möchte ich auch nicht anpassen, da die Funktion grundsätzlich Sinn ergibt.

Danke im Voraus.

 

[floq0r]

Warum wird .offcanvas überhaupt entfernt wenn das Modal geschlossen wird?

 

[netzgestaltung]

Wenn du keine kontrolle über das JS hast, kannst du das entfernen verhindern in dem du den entsprechenden code anschaust, der das macht und warum er das macht. wenn zb nach einer bestimmten klasse oder id gesucht wird (querySelector, getElementByID, $('...')) kannst du die klasse oder ID einfach umbenennen.

Oft reicht auch eine andere Verschachtelung, wenn nach einer klasse in einem element mit einer ID gesucht wird... das hängt dann von deinem DOM-Tree ab.

du kannst auch die logik des entfernen codes ändern oder ähnliches wenn du die kontrolle über das JS hast.

als dritte variante kannst du das DOM Element klonen oder in einer variable speichern und auf ein Event "modal schließt" horchen und das dann aus dem gespeicherten wieder einfügen.

 

[tel6]

Wie gesagt, ich möchte das Verhalten (dass das Element entfernt wird) nicht verhindern. Insgesamt besteht die Seite aus mehreren Offcanvas (Menu, Shopping Cart, Account, usw.). Die anderen Offcanvas Elemente werden im DOM immer komplett neu erstellt, deshalb ist es für diese kein Problem. Mein DOM Element muss allerdings von Beginn an da sein.

Bzw., wenn ich darüber nachdenke: Kann ich das DOM Element irgendwie auch einfach immer "erstellen" bzw. bei Klick ins DOM einfügen?

 

[floq0r]

So wird das nix, poste mal Code. Und jede DOM manipulation ist costly, das ist bad practice, erst recht wenn sie unnötig ist.

 

[netzgestaltung]

;(function(){
  var my_dom_element = document.querySelector('#meinDomelement.offcanvas'),
      cloned_dom_element = mein_dom_element.cloneNode(),
      container = my_dom_element.parentNode;

  // meinModalEvent muß dem Event entsprechen, das gefeuert wird, wenn das Modal geschlossen wird.
  window.addEventListener('meinModalEvent', function(event){
    // ggf prüfen ob container leer ist, mußt selbst im internet suchen
    // if (  container_empty ) {
    container.appendChild(cloned_dom_element);
    // falls das geklonte element JS Events feuern soll, müssen dies neu instanziert werden
    register_events_for_my_dom_element();
    // }
  });
 
})();

tippfehler oder funktion hab ich nicht getestet.

 

[SheepShaver]

Warum manipulierst du das DOM direkt? Und warum nutzt du kein Framework, anstatt vanilla JS direkt im Browser auszuführen? So ein Vorgehen ist doch wirklich nicht mehr zeitgemäß?

 

[netzgestaltung]

ist doch wirklich nicht mehr zeitgemäß?

Hmm - warum so viel Balast für 16 zeilen code mitschleppen, wenn es einfach so funktioniert? Ich würde Werkzeuge immer nach der Aufgabe auswählen und nicht nach der Mode. Schnelles Seitenladen kommt mmn nie aus der Mode ;-)