How to edit text by clicking on it without ajax_javascript skills

New to creatElement, appendChild and other stuff! hehe!
Writing this thing may seem very immature to experts! But I wrote it entirely myself!
It’s not perfect yet, please give me guidance! ! " -//W3C//DTD HTML 4.0 Transitional//EN">

.test{border:1px solid #ccc;background-color:#eee;width:200px;height:60px;}

Editable content

Editable content

< ;/BODY>



The final code to solve the browser problem

<title> New Document </title> <style> body{font-size:14px;} input{border:none;font-size:14px;} .show{border:1px solid #ccc;background-color:#eee;width:150px;height:20px;} .hide{border:1px solid #ccc;background-color:#eee;width:150px;height:20px;display:none;} </style> <font color="red"> well! ! After a busy night, this is it! ! Hee hee hehe depressed! <b></b>Under firefox, due to the small difference in DOM, the div containing input except for the spaces within the tag </font><font color="red"> <b></b> There cannot be spaces because we are using childNodes[0]! Otherwise, you need to click twice! </font><div> <div class="show" id="test" onclick="edit(this.id)"> </div>Editable content one<div class="hide" id="testfm"> <input type="text" name="nn" value="可编辑的内容一" onblur="hide(this.parentNode.id)"> </div> <div class="show" id="test1" onclick="edit(this.id)"> </div>Editable content 2<div class="hide" id="test1fm"> <input type="text" name="nn" value="可编辑的内容二" onblur="hide(this.parentNode.id)"> </div> <div class="show" id="test2" onclick="edit(this.id)"> </div>Editable content three<div class="hide" id="test2fm"> <input type="text" name="nn" value="可编辑的内容三" onblur="hide(this.parentNode.id)"> </div> <div class="show" id="test3" onclick="edit(this.id)"> </div>Editable content four<div class="hide" id="test3fm"> <input type="text" name="nn" value="可编辑的内容四" onblur="hide(this.parentNode.id)"> </div> </div>
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]