DIV-Inhalte austauschen

[Edgar Ehritt]

Hallo Bert,

das sind doch sehr gute und ausgegorene Vorüberlegungen.

Ist meine Idee mit Javascript/ CSS umsetzbar? Ich habe mich mit "innerHTML" versucht, aber da gescheitert.

Es ist mittels Javascript umsetzbar, jedoch würde ich nicht auf innerHTML zurückgreifen. Das aber ist eine Geschmackssache.

<form action="beitrag_bearbeite.script">  
 <ul>  
  <li><div>Beitrag 1</div><input type="submit" value="bearbeiten" onclick="beitrag(this);return(false)></li>  
  <!-- andere Beiträge -->  
 </ul>  
</form>

Mittels DOM hast Du aus einem HTML-Element auf den Elementenbaum des Dokumentes Zugriff.

function beitrag(element){  
/*	Elternelement von <input>, was mit "this" übergeben wurde, ist <li>  
	den Beitragstext enthält der Textknoten, den Du über ".firstChild"  
	erreichst und deren Inhalt Du über ".nodeValue" ansprichst und ab-  
	speicherst */  
	var text=element.parentNode.getElementsByTagName('div')[0].firstChild.nodeValue  
//	jetzt erstellst Du Dein Element Textarea  
	var textarea=document.createElement('textarea')  
//	und übergibst den Inhalt des oben angesprochenen <div>-Elements  
	textarea.value=text  
/*	nun tauschst Du nur noch den Textknoten gegen das geschaffene Text-  
	area-Element aus */  
	element.parentNode.getElementsByTagName('div')[0].replaceChild(textarea, element.parentNode.getElementsByTagName('div')[0].firstChild)  
//	element, was ja <input> ist, soll ja auch geändert werden:  
	element.value="SAVE"  
/*	durch onclick und "return(false)" wurde festgelegt, dass das Formu-  
	nicht abgesendet wurde, dies muss nun auch geändert werden: */  
	element.onclick=""  
}

Für dich zum nachlesen:
http://de.selfhtml.org/javascript/objekte/node.htm
http://de.selfhtml.org/javascript/objekte/document.htm

Gruß aus Berlin!
eddi