Få div att bli textarea?

<div id="edit">Textmassa</div>
vill jag med en enkel knapptryckning skall förvandla sig till:
<textarea>Textmassa</textarea>
och viseversa.

För IE kan du använda contenteditable:

<div id="edit" [kod]contenteditable="true">Textmassa</div>

I javascript borde något av dessa funka(orkar inte testa)

document.getElementById("edit").contentEditable = true;   // Alt. false
document.getElementById("edit").contenteditable = true;   // Alt. false

Nej, inte contentEditable (usch.. ;)), jag menar textarea.

Med reservation för buggar etc eftersom det är skrivet på stående fot. Dessutom helt IE-specifikt (?)

 
<script language="text/javascript"><!--
function switchEdit2(ename){
   var newtag = (document.getElementById(ename).tagName.toLowerCase()=="textarea")?"div": "textarea";
   document.getElementById(ename).outerHTML = "<" + newtag + "id=\"" + ename + "\">" + document.getElementById(ename).innerText + "</" + newtag +">";
}

function switchEdit(ename){
  document.getElementById(ename).tagName = (document.getElementById(ename).tagName.toLowerCase()=="textarea")?"div": "textarea";
}

//--></script>
<div id="edit"> Foobar </div>
<a href="javascript:switchEdit('edit');">Byt metod 1</a>
 - <a href="javascript:switchEdit2('edit');">Byt metod 2</a>

Fortfarande I.E. men det verkar funka

<SCRIPT>
function replaceElement()
{   
    var oChild=Div1.children(0);	
    var sInnerHTML = oChild.innerHTML;
    if (oChild.tagName.toLowerCase()=="textarea")
    {
        oNewChild=document.createElement("div");
        Div1.replaceChild(oNewChild, oChild);
        oNewChild.innerHTML=sInnerHTML
    }
    else
    {
        oNewChild=document.createElement("textarea");
        Div1.replaceChild(oNewChild, oChild);
        oNewChild.innerHTML=sInnerHTML		
    }
}
</SCRIPT>

<DIV ID=Div1>
<div>Textmassor</div>
</DIV>
<button onclick="replaceElement()">Toggle!</button>

nitro2k01: fick aldrig din variant/varianter att funka. Tack ändå.

En mer kompatibel variant:

function switchElm() {
    var mElm = document.getElementById("holder"),
	cElm = (function (){
	    var nodes = mElm.childNodes,
		iLen = nodes.length;
	    for (var i = 0; i < iLen; ++i)
		if (nodes[i].nodeType == 1) return nodes[i];
	    return 0;
	})(),
        nElm;

    if (cElm == 0) return;

    switch (cElm.nodeName.toLowerCase()) {
	case "div":
	{
	    nElm = document.createElement("textarea");
	    nElm.value = cElm.innerHTML;
	} break;

	case "textarea":
	{
	    nElm = document.createElement("div");
	    nElm.innerHTML = cElm.value;
	} break;

	default: return;
    }

    mElm.replaceChild(nElm, cElm);
}

...

<div id="holder">
    <div>Textmassa</div>
</div>
<button type="button" onclick="switchElm()">Switch</button>

:)

Varför måste man ha en div runt om igentligen? (holder)
Varför kan man inte bara döpa denna (<div id="något id">Textmassa</div>) ?

Det blir enklare att referera till det aktuella elementet. Visst kan man ta bort "behållaren", men då blir det mer komplicerat att hitta noden. Det är alltså bara en bekvämlighetssak ;)

BTW: Jag har modifierat ovanstående kod en smula.

:)

Tycker att det borde vara mer komplicerat (enligt min logik) att först skapa en behållare om man kan referera direkt till ex. ett id.