[JavaScript]/[DOM] ganze Elemente kopieren

[BadByte]

hi,
ich hab ein Problem, ich würde gerne ein ganzens Element, sammt Kinder Elemente kopieren,
(z.B. eine table mit ihren ganzen tds und trs)

vollgendes hab ich mir ausgedacht:

  function  clone()
	  {  
        neuesElement = document.getElementById("quelle").firstChild.cloneNode(true);
		document.getElementById("ziel").appendChild(neuesElement);
	  }

dazu der HTML Code:

      <div id="quelle">
	  <h1>das zu kopierende</h1>  
	  </div>
	   <div id="ziel">
	    hier steht schon was
	  </div>

aber es passiert einfach nichts (wenn ich die Funktion aufrufe), nicht mal die Javascript Konsole beschwert sich....
mach ich da grad einen grundsätzlichen Fehler?
ich hab schon bei selfhtml geschaut, leider ist deren Anwendungsbeispiel für "cloneNode" eher unverständlich, also ich verstehs nicht

 

[Sgt_H4rtman]

Hallo BadByte,

das Problem dabei ist, dass diese Methode für jedes Kindelement (inklusive evtl. vorhandener Attribute) ausgeführt werden muss. Die cloneNode-Methode in JavaScript behandelt nur den tatsächlich übergebenen Knoten ohne Kindelemente. Du bist also gezwungen, die ganze Methode rekursiv aufzurufen und dabei zwischen Element- und Attributknoten zu unterscheiden.


Ciao

 

[BadByte]

giebts denn keine methode, die ganze Elemente kopiert? (vielleicht cloneChild )

ich muss mir jetzt also eine Funktion überlegen, die Elemente kopiert, indem sie das zu kopierende Element, auf Kinderelemente, Attribute usw überprüft,
und die Kinderelemente wieder auf Kinderelemente und Attribute überprüft...
oder hab ich des falsch verstanden? (was bedeutet rekursiv?)

 

[Sgt_H4rtman]

Hi,

rekursiv bedeutet in Deinem Fall genau das, was du beschrieben hast. Alternativ könntest Du natürlich auch per innerHTML arbeiten. Das wäre wohl leichter, zumal der MSIE eh nicht alle Elemente per DOM-Syntax kopieren kann. Input-Felder, die nicht vom Typ Text sind, lassen sich per DOM-Syntax im IE nicht kopieren oder gar dynamisch erstellen.


Ciao

 

[BadByte]

hm, da hab ich wohl keine andere Wahl, als mit innerHTML zu arbeiten....
ok, danke :-)

 

[Keita]

Die Methode cloneNode() kopiert je nach Parameter entweder nur den Node selbst (false) oder den Node samt aller Kindselemente (true).
Das o.g. Skript funktioniert deswegen nicht, weil das erste Kindselement des Nodes mit der ID »quelle« geklont wird, und das ist je nach JS-Engine entweder das erste nicht leere Element (h1, bspw. IE 6) oder das erste Element überhaupt (textnode, bspw. Firefox).

greetings, Keita

 

[BadByte]

ok, sry, aber das versteh ich jetzt nicht....
es wird doch das erste Kinderelement, der Elements mit der id "quelle" geklont... oder wie muss ich des ausdrücken, damit dieses geklont wird....

warum ist das in JS das erste nicht leere Element? bzw. warum wird nur der textnode kopiert, ich dachte da wird das h1 mit dem textnode kopiert?
oder hab ich das falsch verstanden?

 

[BadByte]

ok, ich war jetzt ein bissel im i-net unterwegs und hab auf einer Seite was gefunden, (auf den englischen stehts manchmal verständlich als auf den deutschen )

jedenfalls hab ich dann meine function in dass abgeändert:

 neuesElement = document.getElementById("quelle").cloneNode(true);
        document.getElementById("ziel").appendChild(neuesElement);

@ Keita: Ich glaub ich versteh was du gemeint hast, nur deine Begründung, check ich net, kannst du sie mir bitte nochmal erklären *liebschau*?

 

[Keita]

Der Knackpunkt ist das Attribut firstChild des Nodes mit der ID "quelle":
bei Firefox zählen alle Kindselemente eines Nodes zu childNodes, insbesondere auch leere Textnodes, bei

<div id="quelle">
	  <h1>das zu kopierende</h1>  
	  </div>

hat das DIV-Element also folgende childNodes:

• TextNode. Leer, da nur whitespaces vor einem block level-Element (h1).
• Node mit tagName H1.
• TextNode. Leer, da nur whitespaces zwischen zwei schließenden Tags.

Das Attribut firstChild liefert in diesem Fall das erste Element aus childNodes, sprich den ersten TextNode.

Beim IE hingegen werden die o.g. leeren TextNodes nicht in childNodes aufgenommen, in diesem Fall enthält childNodes ein einziges Element, nämlich den Node mit dem tagName H1 und demzufolge liefert firstChild dieses Element.

Wenn man mit NodeLists wie childNodes hantiert, muß man sich dieses Umstands bewußt sein, damit man nicht irrtürmlich wie im o.g. Beispiel auf falsche Elemente zugreift. Das sind die klassischen Fallstricke, die cross-browser-Entwicklungen zu einem Hickhack werden lassen.

greetings, Keita

 

[BadByte]

ahhhh, das erkärt vieles, danke