Dom Elemente hinzufügen und löschen

S

Stefan Miefert

Mitglied
Ich möchte eine Liste mit Daten ausgeben. Dies emöchte ich dynamisch auslesen udn entfernen. DAs klappt alles ganz gut. Wie kann ich diese einfach in den DOM Baum ausgeben und daraus entfernen?

Derzeit versuche ich es mit:

e = document.getElementById('datalist');
var div = document.createElement("div");
e.appendChild(div);
e.div.firstChild.nodeValue = "hallohallo";

Letzteres klappt aber nicht:(

Wie geht sowas ?:)
 
Klar: Mit "firstChild" kannst du nicht immer Glück haben.
Ich gebe dir mal eine Beispieldatei, die ich mir vor mal von www.styleassistant.de (Tipps&Tricks) kopiert hatte. Leider ist die Seite nicht mehr erreichbar und der Autor hat hoffentlich nichts gegen die Weitergabe. Die Datei demonstriert aber das Prinzip ganz prima:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Quelle: www.styleassistant.de
Datei: beispiel44.htm -->
<HTML>
<HEAD>
<META NAME="Author" CONTENT="Dr. Thomas Meinike - thomas@handmadecode.de">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<TITLE>W3C-DOM: createElement / appendChild / removeChild</TITLE>
<!-- <LINK REL="STYLESHEET" HREF="../styles/tipsinfo.css" TYPE="text/css"> -->

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function NeuerAbsatz() {
  var neueid = prompt("Bitte neue Absatz-ID eingeben!","");
  if (neueid != "" && neueid != null) {
    var neuesElement = document.createElement("P");
    neuesElement.setAttribute("id", neueid);
    var farbe = document.auswahl.farbe.options[document.auswahl.farbe.options.selectedIndex].value;
    neuesElement.style.color = farbe;
    neuesElement.innerHTML = "<B>Das ist ein neuer Absatz mit ID=&quot;"+neueid+"&quot;.<\/B>";
    document.getElementById("dok").appendChild(neuesElement);
  }
  else alert("Keine ID eingegeben!");
}
function AbsatzEntfernen() {
  var vorhandeneid = prompt("Bitte vorhandene Absatz-ID eingeben!","");
  if (document.getElementById(vorhandeneid)) {
    document.getElementById("dok").removeChild(document.getElementById(vorhandeneid));
  }
  else alert("Das Objekt existiert nicht!");
} 
//-->
</SCRIPT>

</HEAD>
<BODY ID="dok" BGCOLOR="#EEEEEE">

<H2>W3C-DOM: createElement / appendChild / removeChild</H2>

<FORM ACTION="" NAME="auswahl">
<INPUT TYPE="button" VALUE="Neuer Absatz" OnClick="NeuerAbsatz()">
  <SELECT NAME="farbe" SIZE="1">
    <OPTION VALUE="#000000">Textfarbe</OPTION>
    <OPTION VALUE="#FF0000">rot</OPTION>
    <OPTION VALUE="#009900">gr&uuml;n</OPTION>
    <OPTION VALUE="#0000FF">blau</OPTION>
  </SELECT>
<INPUT TYPE="button" VALUE="Absatz entfernen" OnClick="AbsatzEntfernen()">
</FORM>

<BR><BR>

<P CLASS="klein">
&copy; HTML-Seminarmaterial von
<A CLASS="info" HREF="http://www.et.fh-merseburg.de/person/meinike/" TARGET="_top">Thomas</A>
<A CLASS="info" HREF="http://www.StyleAssistant.de" TARGET="_top">Meinike</A>
1999...2002
</P>

</BODY>
</HTML>
 
Hallo,

wenn ich jetzt mehrere Elemente in der Form

infoblatt1
infoblatt2
infoblatt...

anlege

Waws wäre die beste Form diese dann dynamisch auf existenz abzufragen um sie dann später zu löschen?

udn noch eine abschließende Frage:) Wie kann ich diesem neuen p Tag bzw bei mir div Tag eine Klasse zuordnen?

Auf jeden Fall schonmal Danke!
 
Ich verstehe nicht richtig, was du eigentlich machen willst.

Du hast eine Liste mit der ID="datalist". Willst du nun
  • die Liste mit LI-Elementen erweitern bzw. sollen LI-Elemente gelöscht werden
  • oder willst du den Inhalt eines bestimmten LI-Elementes mit DIV-Blöcken erweitern bzw. sollen DIV-Blöcke daraus gelöscht werden?
Am besten, wenn du mal den entsprechenden HTML-Abschnitt zeigst.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück