kostenloser Webspace werbefrei: lima-city

Span-Elemente erstellen und löschen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   das-koenigreich

   das-koenigreich hat kostenlosen Webspace.

   14:38, 19.8.2011

   Ich möchte mit JS eine variable Anzahl an Span-Elementen für einen Zweck erstellen und vorher die alten löschen. Aber nur die mit diesem einen Zweck. Die, die für diesen Zweck bestimmt sind, gehören alle einer gemeinsamen CSS-Klasse an, also diese muss dann beim Erstellen der Span-Elemente auch auf die neu erstellten Span-Elemente angewandt werden. Andere Elemente im verwendeten HTML-Dokument verwenden diese Klasse nicht.
   
   Zusätzlich zu den CSS-Eigenschaften, die die Span-Elemente durch die CSS-Klasse bekommen, muss ich bei allen noch top und left festlegen. Diese Eigenschaften sind bei all diesen Span-Elementen anders.
   
   Leider schlugen meine bisherigen Versuche fehl. Ich denke aber, dass es einfacher würde, wenn man die ganzen Span-Elemente nicht gleich in den document-Teil stecken würde, sondern in ein DOM-Element, in dem sich nur diese Span-Elemente befinden. Das habe ich auch schon selbst versucht, aber leider schlug das auch fehl.

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. m******************r

   18:01, 20.8.2011

   Hallo!
   
   Ich würde dir jQuery dafür empfehlen, da geht das relativ easy:
   
   Zum Löschen:
   

   $("span.spezielleKlasse").each(function()
   {
       $(this).remove();
   });

   
   
   und zum Einfügen:
   

   $("<span/>")
       .appendTo("body")
       .addClass("spezielleKlasse")
       .css({ top: 123px, left: 456px });

   
   Für mehrere neue span-Elemente einfach in eine Schleife packen.
   
   
   Ich hoffe, das trifft das, was du geplant hattest.
   
   Lg
   
   Edit:
   Fehler in obigem Code müssten die fehlenden Anführungszeichen bei den Pixelangaben sein.
   
   Beitrag zuletzt geändert: 20.8.2011 20:38:38 von markus-niederbrucker
4. Autor dieses Themas

   das-koenigreich

   das-koenigreich hat kostenlosen Webspace.

   18:27, 20.8.2011

   Danke erstmal, aber das funktioniert irgendwie nicht. Müsste das mit dem CSS nicht auch in einem String stehen? Das habe ich auch probiert, aber es hat nicht geklappt. Außerdem müsste ich noch einen Inhalt für die Span-Elemente festlegen können. Die Fehlerkonsole schweigt übrigens.

5. m******************r

   19:04, 20.8.2011

   Man kann auch so schreiben, ja:
   

   $("<span/>")
       .appendTo("body")
       .addClass("spezielleKlasse")
       .css("top", "123px")
       .css("left", "456px");

   
   Für den Inhalt kann man noch ein

   .append("Inhalt")

   hinzufügen.
   
   Sollte eigentlich funktionieren.
   jQuery-Bibliothek hast du eingebunden?
6. Autor dieses Themas

   das-koenigreich

   das-koenigreich hat kostenlosen Webspace.

   19:12, 20.8.2011

   Danke ! So funktioniert es .

7. m******************r

   20:39, 20.8.2011

   Bitte gerne!

8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?