getElementsByTagName Problem

[webdesigner95]

Hallo Leute,

Ich wollte gerne in meinem Programm ein Element erstellen, das es in HTML gar nicht gibt (card). Dann wollte ich diesem Element einen Text hinzufügen & card in den Body einfügen. Bloß schaffe ich es nicht, etwas in den Body einzufügen. Ich habe es auch schon mit body[0].appendChild(card); versucht, um auf das erste Bodyelement im Quelltext zuzugreifen. Hier der Quellcode:

          var body = document.getElementsByTagName("body");
          var card = document.createElement("card");
          var txt = document.createTextNode("Hello, World!");

          card.appendChild(txt);
          body.appendChild(card);

Wäre für eure Hilfe dankbar
Grüsse, Webdesigner95

 

[vitus37]

Warum möchtest du ein neues Element erfinden?

Wenn es sich um Textinhalt handelt wäre ein p-Tag passender. Mit einer ID lässt sich dann leicht auf das Element zugreifen.

<p id="card">Textinhalt</p>

Javascript:

var card = document.getElementById("card");

 

[crash]

document.getElementsByTagName() gibt eine NodeList zurück; ergo: document.getElementsByTagName("body")[0] oder document.getElementsByTagName("body").item(0). document.body geht aber einfacher.

 

[struppi]

Hier der Quellcode:

          var body = document.getElementsByTagName("body");
          var card = document.createElement("card");
          var txt = document.createTextNode("Hello, World!");

          card.appendChild(txt);
          body.appendChild(card);

Wäre für eure Hilfe dankbar

Schau mal in die Fehlerkonsole, da fndest du sofort Hilfe, denn dieser Code erzeugt eine Fehlermeldung.

 

[webdesigner95]

Bei mir kommt bei einem Aufruf von body.appendChild(card); immer die Antwort body is null :(

 

[struppi]

Das kann nicht sein, body ist in deinem Beispiel nie null

 

[mermshaus]

Bei mir lautet die Fehlermeldung: „body.appendChild is not a function“

Der Grund dafür wurde schon mehrfach genannt.

Zeig vielleicht mal den gesamten Code.

 

[webdesigner95]

card();
card = function(){
var body = document.getElementsByTagName('body').item(0);
var card = document.createElement("card");
var txt = document.createTextNode("Hello, World!");

card.appendChild(txt);
body.appendChild(card);


}

Wenn ich diesen Code ausführe, bekomme ich in Chrome die Meldung
Uncaught TypeError: Cannot call method 'appendChild' of null

Und in Firebug (Firefox) die Meldung
body is null body.appendChild(card);

 

[mermshaus]

Zum Zeitpunkt der Ausführung ist das DOM vermutlich noch nicht geladen.

window.onload = function ()
{
    card = function(){
        var body = document.getElementsByTagName('body').item(0);
        var card = document.createElement("card");
        var txt = document.createTextNode("Hello, World!");

        card.appendChild(txt);
        body.appendChild(card);
    };
    card();
};

 

[webdesigner95]

Danke, daran habe ich bis jetzt noch gar nicht gedacht. Jetzt läuft alles Prima und ich bekomme die Nachricht Hello, World!.

 

[crash]

card = function(){

Warum das ganze? Um globale zu vermeiden? Wir sind innerhalb einer Funktion und du implizierst sogar noch eine Globale, ohne ein „var“.

 

[webdesigner95]

Ich will spaßeshalber ein kleines Framework machen, das ähnliche Funktionen wie jo haben soll (Jo HTML5 Mobile App Framework). Da habe ich jetzt nicht den ganzen Quellcode gezeigt, denn card ist nur eine Unterfunktion.