kai345: <body> Inhalt temporär entfernen

Beitrag lesen

SELF-Forum

<body> Inhalt temporär entfernen

kai345
– Informationen zu den Bewertungsregeln

Hallo,

ich hab mir da gerade was gebastelt und funktioniert auch. Bin aber nicht sicher ob das sauber gelöst und/oder Alternativen gegeben hätte.

Um es kurz zu machen, in einer dynamischen Webseite möchte ich die Dynamik für einen Moment rauswerfen, so dass ich das Basisgerüst ohne viel auszusortieren abspeichern kann. Gleichzeitig aber auch die gesplitteten Inhalte zur Verfügung habe.

Also dachte ich mir, nehme das ganze Dokument, entferne den body-bereich und speichere den Content als Variable, packe danach aber wieder rein damit ich dynamisch weiter arbeiten kann. Eigentlich hatte ich gar nicht erwartet dass die funktioniert, wenn die Befehle/Funktionen einmal entfernt wurden(die ja im Body stehen), doch scheint ja so als wenn trotzdem die letzte Prozedur auf Basis des alteren DOMs zu Ende gebracht wird.

Ich würde es mit DOM-Methoden lösen und die Kinder von body in ein documentFragment umzuhängen..

Anbei ein kleines Besipiel, das ich mal eben erstellt habe (daher eventuell nicht die eleganteste Lösung)

Das setTimeout-Geraffel dient nur dazu, den Vorgang visuell nachvollziehbar zu machen.

nach 2 Sekunden -> body leeren nach weiteren 2 Sekunden -> Inhalt wieder einzufügen.

<!DOCTYPE html>
<html>
<head><title>Test</title></head>
<meta charset="UTF-8">
<body>
<p>Yo</p>
<p><span>hurz</span></p>
<p>narf!</p>
<ul><li>1</li><li>3</li><li>5</li><li>7</li></ul>
<p>Desoxyribonucleinsäure-Doppelhelix</p>
<p>YOLO</p>
<script>
const bodyContent = document.createDocumentFragment();

setTimeout(function () {
	umhaengen(document.body, bodyContent);

	setTimeout(function () {
		umhaengen(bodyContent, document.body)
	}, 2000)
}, 2000)	

function umhaengen(src, dest) {
	let node;
	while ((node= src.childNodes[0])) {
		dest.appendChild(node);
	}
}
</script>
</body>
</html>
--
Stur lächeln und winken, Männer!
Beitrag melden
–
Informationen zu den Bewertungsregeln