Just contact Createlement, appendchild and other Dongdong! Oh!
Wrote this thing, may be in the master's view, very immature! But I wrote it all by myself!
has not perfected, please the hero instruction!!
Look at the code
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
. test{border:1px solid #ccc; Background-color: #eee; width:200px;height:60px;}
</style>
<script language= "JavaScript" >
<!--
function Isie () {//ie?
if (Window.navigator.userAgent.indexOf ("MSIE") >=1) return true;
else return false;
}
if (!isie ()) {//firefox innertext define
htmlelement.prototype.__definegetter__ ("InnerText",
function () {
return this.textcontent;
}
);
htmlelement.prototype.__definesetter__ ("InnerText",
function (stext) {
This.textcontent=stext;
}
);
}function $ (e) {
return document.getElementById (e);
}
var arr=new Array ();
function Check (e) {
var v=0;
for (i=0;i<arr.length;i++)
{if (arr[i]==e) v=1;
else v=0;}
if (v) return true;
else return false;
}
function edit (e) {
var x=$ (e);
var Str=x.innertext;
if (check (e))
{
Alert ("already exists in the array!") ");
alert (str);
var b=$ (e+ "FA");
str=$ (e+ "FAZ"). Value;
B.removechild ($ (e+ "FAZ"));
X.INNERTEXT=STR;
}else{
Alert ("No presence in the array!") ");
A1=document.createelement ("div");
A1.id=e+ "FA";
A=document.createelement ("INPUT");
a.name=e;
A.id=e+ "FAZ";
A.VALUE=STR;
X.innerhtml= "";
X.appendchild (A1);
A1.appendchild (a);
if (arr.length==0) arr[0]=e;
else arr[arr.length]=e;
alert (a.name);
}
}
-->
</script>
</HEAD>
<BODY>
<div class= "test" id= "Test" onclick= "edit" (' Test ') > Editable content </div>
<div class= "test" id= "Test1" onclick= "edit (' test1 ')" > Editable content </div>
</BODY>
</HTML>
The last code to resolve the browser problem
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <HTML> <HEAD> <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> <script language= "JavaScript" > <!--function $ (e) {return document.getElementById (e) ;//encapsulation Get function} function edit (e) {//parseint $ (e). style.display= "None"; $ (e+ "FM"). style.display= "Block"; $ (e+ "FM"). Childnodes[0].focus (); The child element of the DIV automatically obtains the focus} function Hide (e) {//parseint $ (e). style.display= "None"; $ (E=E.REPLACE ("FM", "")). style.display= "Block"; }--> </script> </HEAD> <BODY> Alas!! Busy all night, so solved!! Hee-ha Oh depressed! <font color=red><b> under Firefox because Dom has a very small differenceDifferent, contains input div in addition to the inside of the label of the empty </b></font> <font color=red><b> can not have space because we use is childnodes[0]! otherwise need to point two! </b></font> <div> <div class= "show" id= "Test" onclick= "edit (this.id)" > Editable content one </div> &L T;div class= "Hide" id= "TESTFM" ><input type= "text" name= "nn" value= "editable content One" onblur= "Hide (this.parentNode.id)"/ ></div> <div class= "show" id= "Test1" onclick= "edit (this.id)" > Editable content two </div> <div class= "Hide" Id= "TEST1FM" ><input type= "text" name= "nn" value= "editable content two" onblur= "Hide (this.parentNode.id)"/></div> <div class= "Show" id= "Test2" onclick= "edit (this.id)" > Editable Content III </div> <div class= "Hide" id= "TEST2FM" > <input type= "text" name= "nn" value= editable content three "onblur=" Hide (this.parentNode.id) "> </div> <div class=" Show "id=" Test3 "onclick=" edit (this.id) > Editable content four </div> <div class= "Hide" id= "TEST3FM" > <input typ E= "text" name= "nn" value= "editable contents of four" onblur= "HIDE (this.parentNode.id) "> </div> </div> </BODY> </HTML>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
