Problem mit duplizieren eines <div> per JavaScript

[Matthis]

Moin moin,

ich will per JavaScript <div> duplizieren. In diesem <div> habe ich 4 Radiobuttons die in 3 Fällen onClick ein <input type="text"> erstellen. Im 4. Fall eine <textarea>.  Klicke ich nun auf den 4. (der eine textarea erstellt) und dupliziere dieses <div>, kann ich im duplikat das Eingabefeld nicht mehr verändern. D.h. klicke ich auf den 1. Radiobutton der ein <input type="text"> zur Folge hätte, wird das Eingabefeld nicht geändert. Was mache ich falsch ?

---Mein div---

  
<div class="middle" style="background-image: url(img/middle.jpg);">  
    <div id="rootForm" class="middleleft">  
  
	<input type="hidden" value="Entfernen"		onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />  
        <br /><br />  
  
        <span>Welchen Filtertyp möchten Sie verwenden?</span><br />  
	<input type="radio" id="sender" name="rule" value="SENDER"  
title="Absender" onclick="getInput(this)" checked="checked" />Absender  
        <br />  
  
        <input type="radio" id="subject" name="rule" value="SUBJECT"  
title="Betreff" onclick="getInput(this)" />Betreff  
        <br />  
  
	<input type="radio" id="date" name="rule" value="DATE" title="Datum"  
onclick="getInput(this)" />Datum  
        <br /> 		  
  
	<input type="radio" id="content" name="rule" value="CONTENT" title="Inhalt" onclick="getInput(this)" />Inhalt  
        <br /><br />  
					  
	<span title="Der Filterwert"> Wert: </span><br />  
	<input type="text" id="ruleValue" name="ruleValue" />  
	<input type="hidden" id="dateValue" name="ruleSecondValue" />  
        <br />  
  
    </div>  
    <span id="writeForm"></span>  
  
</div>  

---Buttons die das duplizieren auslösen---

  
<div class="middle" style="background-image: url(img/middle.jpg);">  
   <br />  
   <div class="middleleft">  
	<input type="button" name="addAnd"  
title="Fügt eine &&-Verknüpfung hinzu" value="&&" onclick="addForm()"/>  
  
        <input type="button" name="addOr" title="Fügt eine ||-Verknüpfung hinzu" value="||" onclick="addForm()" />  
  
        <input type="hidden" name="linkValue" value="">  
    </div>  
    <br />  
</div>  

---JS-Funktion die das neue div anfügen---

  
function addForm() {  
	counter++;  
	var newFields = document.getElementById('rootForm').cloneNode(true);  
	newFields.id = 'newForm' + counter;  
	newFields.style.display = 'block';  
	var newField = newFields.childNodes;  
	for ( var i = 0; i < newField.length; i++) {  
		var field = newField[i];  
		if (field.nodeType == 1 && field.nodeName == 'INPUT') {  
			if (field.value == 'Entfernen') {  
				field.type = 'button';  
			}  
			field.name = field.name + "[" + counter + "]";  
			field.id = field.id + '_' + counter;  
	        } else if (field.nodeType == 1 && field.nodeName == 'textarea') {  
			field.name = field.name + "[" + counter + "]";  
			field.id = field.id + "[" + counter + "]";  
		}  
	}  
	var insert = document.getElementById('writeForm');  
	insert.parentNode.insertBefore(newFields, insert);  
}  

---JS-Funktion die entscheided welches 'Inputfeld' angezeigt werden soll---

  
  
function getInput(box) {  
	var id = box.id;  
	var typ = box.title;  
	setInput(typ, id);  
}  
  
function setInput(typ, id) {  
	var dateBox = 'dateValue';  
	var valueBox = 'ruleValue';  
	var textarea = 'textarea';  
	if (id.lastIndexOf('_') != -1) {  
        	dateBox += id.substring(id.lastIndexOf('_'));  
		valueBox += id.substring(id.lastIndexOf('_'));  
		textarea += id.substring(id.lastIndexOf('_'));  
	}  
  
	if (typ != 'Inhalt' && typ != 'Datum') {  
	        if (document.getElementById(dateBox).type == 'text') {  
			document.getElementById(dateBox).type = 'hidden';  
		}  
		if (document.getElementById(textarea) != null) {  
			var oldEl = document.getElementById(textarea);  
			var newEl = document.createElement('input');  
  
			newEl.setAttribute('type', 'text');  
        		newEl.setAttribute('id', valueBox);  
  
			oldEl.parentNode.replaceChild(newEl, oldEl);  
  
		} else {  
  
			document.getElementById(valueBox).type = 'text';  
		}  
  
	} else if (typ == 'Datum') {  
  
		if (document.getElementById(textarea) != null) {  
  
			var oldEl = document.getElementById(textarea);  
			var newEl = document.createElement('input');  
			newEl.setAttribute('type', 'text');  
			newEl.setAttribute('id', valueBox);  
			oldEl.parentNode.replaceChild(newEl, oldEl);  
  
		} else {  
  
			document.getElementById(valueBox).type = 'text';  
		}  
		document.getElementById(dateBox).type = 'text';  
  
	} else {  
  
		if (document.getElementById(dateBox).type == 'text') {  
  
			document.getElementById(dateBox).type = 'hidden';  
		}  
  
		var oldEl = document.getElementById(valueBox);  
		var newEl = document.createElement('textarea');  
		newEl.setAttribute('id', textarea);  
        	newEl.name = valueBox;  
		oldEl.parentNode.replaceChild(newEl, oldEl);  
	}  
}  

Thanks in advance

Gruß Matthis

[LX]

Warum machst Du es Dir so kompliziert? Arbeite doch lieber mit innerHTML und einem entsprechenden Ersetzer für die IDs vor dem Einhängen ins DOM.

Gruß, LX

[Matthis]

Warum machst Du es Dir so kompliziert? Arbeite doch lieber mit innerHTML und einem entsprechenden Ersetzer für die IDs vor dem Einhängen ins DOM.

Damit hab ich leider keine Erfahrung, kannst du mir da ein kurzes bsp geben, damit ich sehe wie du das meinst ?

Gruß Matthis

[LX]

Etwa so (Vorsicht, ungetesteter Code):

var newdiv = document.createElement('div'), olddiv = document.getElementById('whatever');  
newdiv.innerHTML = olddiv.innerHTML.replace(/id="(\w+)(\d*)"/g, function(full, id, no) { return 'id="'+id+(++(no||1))+'"'; });

Gruß, LX