Nachträgliches hinzufügen von TAG's

F

FreakDad

Mitglied
Hallo Leute,

ich brauche mal eure Hilfe, hoffe das mir einer helfen kann. ^^

Folgendes will ich machen.
HTML: 
<Body>
Unbekannter Inhalt
</Body>
Ich will jetzt nach dem die Seite geladen ist, nach dem Body ein div mit id hinterlegen und das div direkt vor dem /Body schließen.

So soll es aussehen:
HTML: 
<Body>
<div id="blabla">
Unbekannter Inhalt
</div>
</Body>
Man könnte das ja so lösen:
Javascript: 
document.getElementsByTagName("body")[0].innerHTML='<div id="jsTest">'+document.getElementsByTagName("body")[0].innerHTML+'</div>';
Problem: So weit ich weiß fügt der nicht dadurch hinzu, sondern er schreibt alles neu. Oder?

Freue mich auf eure Lösungsansetze.
 
Zuletzt bearbeitet von einem Moderator:
Im Prinzip das was du oben auch schon stehen hast:

HTML: 
<style type="text/css">
#test {
	background-color:#808080;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$("#button1").click(function () {
		old = $("body").html();
		$("body").html("<div id='test'>" + old + "</div>");
	});


});
</script>
<body>
	<h1>erste Zeile</h1>
	<br />
	<p>Text als neuer Absatz</p>
	<br />
	<input type="button" name="button1" id="button1" value="Insert" />
	<h3>letzte Zeile</h3>
</body>

Anders wie den kompletten Inhalt neu zu schreiben wird es nicht gehen.
 
Ist vielleicht eine blöde Frage aber ich stelle sie trotzdem.

Warum darf der Inhalt nicht neu geschrieben werden, er wird ja 1:1 wieder so eingetragen wie er war, nur eben mit dem zusätzlichen DIV am Anfang und am Ende!?

Geschrieben oder halt neu geschrieben wird auf jeden Fall, denn der Code soll sich ja ändern.
 
Der Inhalt des Bodys wird verändert, neu geschrieben wird also auf alle Fälle.
Die DOM Elemente an sich bleiben aber die gleichen (so viel mir ist). So bleiben Events die auf den DOM Elementen liegen erhalten.

Nun kommt es also drauf an was du genau erreichen willst und was nicht passieren darf.


Grüsse
 
Es ist DEFINITIV möglich!

Man muss nur den DOM-Knoten umhängen, indem man ihn zuerst löscht und ihn danach wieder einfügt.

Beweis

jsFiddle

HTML:
HTML: 
<body>
    <div id="old">Old div here.
        <script>
            console.log("Executed script block!");
        </script>
    </div>
</body>
Sinn des JS ist es, eine Meldung beim Ausführen zu loggen. Wenn nun der Skriptblock zweimal geparst und ausgeführt wird, dann werden auch zwei Meldungen in der Konsole sichtbar sein.

JavaScript:
Javascript: 
var oldDiv = document.getElementById("old");

var newDiv = document.createElement("div");
// Make it visible
newDiv.style.minHeight = "20px";
newDiv.style.background = "orange";

document.body.removeChild(oldDiv);
document.body.appendChild(newDiv);
newDiv.appendChild(oldDiv);

Probiert's aus, ihr werdet nur eine Meldung in der Konsole sehen, sprich, der Code wird nicht neu interpretiert.
 
In deinem Beispiel ist aber der DIV-Conatiner bereits vorhanden.

FreakDad lädt aber eine Seite ohne DIV und will diesen nachträglich in die Seite einbauen ohne das sie "neu geschrieben" wird.
 
Er lädt eine Seite mit unbekanntem Inhalt. Also, alles was in <body> steckt, in eine <div> packen. Child von body wird child von div.

mfg chmee
 
chmee hat gesagt.:
Er lädt eine Seite mit unbekanntem Inhalt. Also, alles was in <body> steckt, in eine <div> packen. Child von body wird child von div.
Zum Vergrößern anklicken....
Genau!
Wegen document.body muss man hier einen kleinen Umweg betreiben; so funktioniert es:
Javascript: 
var newDiv = document.createElement("div");
// Make it visible
newDiv.style.minHeight = "20px";
newDiv.style.background = "orange";

var childNodes = document.body.childNodes;

while (childNodes.length) {
    var node = childNodes.item(0);
    newDiv.appendChild(document.body.removeChild(node));
}

document.body.appendChild(newDiv);

jsFiddle

Vorsicht ist hier vor Allem bei childNodes geboten, da dies eine Live NodeList ist, sprich sie ändert automatisch die Elemente, wenn wir z.B. ein Element löschen. Deshalb iterieren wir hier solange, bis es keine Elemente mehr gibt.
 
Der Ansatz war schon mal nicht verkehrt, aber leider geht es auch nicht. Der Inhalt der Seite wird auch in diesem Beispiel neu geschrieben.
Habe einfach mal en IFrame rein gesetzt wo ne Datei drin ist die die aktuell Uhrzeit schreibt. Dann nach 3 Sekunden per Funktion deine Schnipsel ausgeführt und das IFrame wird dann wieder neu geladen.

Hat eventuell noch jemand ne Idee?

Ich erkläre auch mal kurz warum ich das brauche. Bei Mobile-Geräten den Body auf Overflow zu setzen ist extrem schwer und umständlich. Die Variante mit einem umlaufenden div als wapper ist die einzige Variante die immer zu 99% funktioniert.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück