[JavaScript] Element hinzufügen

[frankred]

Hallo Leute,
seit geraumer Zeit interessiere ich mich für AJAX.
Jetzt habe ich ein Javascript Problem.

Und zwar möchte ich in einen DIV Container,Indem sich viele DIVS befinden (in meinem Fall sind das Gästebucheinträge), Am Anfang , also direkt nach dem öffnen des DIV CONTAINER per JavaScript neue EINTRÄGE platzieren.

das sieht so aus...

<div id="container">
<!-- 
HIER SOLL EIN NEUER DIV REIN und zwar: <div id="26">Gästebucheintrag26</div>
-->
<div id="22">Gästebucheintrag22</div>
<div id="18">Gästebucheintrag18</div>
<div id="15">Gästebucheintrag15</div>
<div id="11">Gästebucheintrag11</div>
<div id="9">Gästebucheintrag9</div>
<div id="2">Gästebucheintrag2</div>
</div>

Habe schon mich schon mit den Methoden appendChild() und insertBefore() beschäftigt, komme aber nich so ganz damit zurecht.
Das Problem ist dass ich nie die id des Obersten Eintrages weiß, weil diese automatisch aus einer Datenbank geholt werde.
Vorallem eigentlich breuchte ich ja eigentlich so ne methode wie appendChildAtTop().....

kann mir jemand weiterhelfen

Schönen tag euch noch allen

 

[metax.]

Hier, lies dir das mal durch:
http://www.howtocreate.co.uk/tutorials/javascript/dombasics

Stichworte, nach denen du suchen kannst: Javascript, DOM, HTML, Tutorial

mfg, metax.

 

[frankred]

Erstmal danke für deine Mühe werde mir das mal anschauen.

EDIT: Also habe es jetzt mal folgendermaßen Probiert...

document.getElementById('container').childNodes[0].insertBefore(xmlHttp.responseText);

also ich will den Text der bei dem Request geholt wirdausgeben.
funktioniert leider nicht.

Console:

[Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: [URL]http://xxxxxxx/index.php[/URL] :: anonymous :: line 195" data: no]

 

[Plexo]

Siehe http://de.selfhtml.org/javascript/objekte/node.htm#insert_before.

Probier mal folgendes:

var newElement = document.createElement("div");
var responseText = document.createTextNode(xmlHttp.responseText);
newElement.appendChild(responseText);
document.getElementById('container').insertBefore(newElement, document.getElementById('container').childNodes[0]);

Gruß

 

[frankred]

var newElement = document.createElement("div");
var responseText = document.createTextNode(xmlHttp.responseText);
newElement.appendChild(responseText);
document.getElementById('container').insertBefore(newElement, document.getElementById('container').childNodes[0]);

Supergeil das funktioniert Wahnsinn!
du bist echt genial

DANKE!

Jetzt hab ich allerdings nur noch 1 Problem. Und zwar befinden sich im Response Text ein paar HTML Elemente z.B. <br/> oder <span></span>. Leider wird dieser Responsetext ausgegeben und nicht mehr vom Browser interpretiert bzw. Alle Zeichen scheinen Escaped zu seind, sind sie aber nicht?

Gibts da einen Parameter für createTextNode oder so das die textNode interpretiert wird?

 

[Eydeet]

Was passiert, wenn du das so machst? Ich hab's nicht getestet:

var newElement = document.createElement("div");
var responseText = document.createTextNode("");
responseText.innerHTML = xmlHttp.responseText;
newElement.appendChild(responseText);
document.getElementById('container').insertBefore(newElement, document.getElementById('container').childNodes[0]);

 

[Plexo]

Folgendes müsste funktionieren:

var newElement = document.createElement("div");
newElement.id = "26";
newElement.innerHTML = xmlHttp.responseText;
var container = document.getElementById('container');
container.insertBefore(newElement, container.firstChild);

Die ID müsstest du dann irgendwie auslesen, damits dynamisch wird!

Gruß

 

[frankred]

Also erstmal danke für eure Hilfe hat mir echt viel gebracht.
Habs jetzt folgendermaßen gemacht

// Timestamp für eindeutige ID würd erstellt
var jetzt = new Date();
var timestamp = jetzt.getTime();
 
var newElement = document.createElement("div");
newElement.setAttribute('id',timestamp);
var responseText = document.createTextNode(xmlHttp.responseText);
newElement.appendChild(responseText);
document.getElementById('container').insertBefore(newElement, document.getElementById('container').childNodes[0]);
document.getElementById(timestamp).innerHTML=xmlHttp.responseText;

 

[onemice]

Hatte in meinem Blog vor einiger Zeit mal ein Tutorial dafür geschrieben. Die Funktion ist natürlich für dich nur sinnvoll, wenn du das nicht nur einmal sondern öfter machst =)

Hier der Eintrag ...
... und hier der Nachtrag =)

Vielleicht hilft es dir ja.

ghost