Just got in touch with createlement, appendchild, etc! Haha!
I wrote this thing. It may seem very immature to the experts! But I wrote it myself!
Not complete yet. Please kindly advise !!
View Code
Copy code The Code is 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 ("not included 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 ();
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 final code to solve the browser problem <br/> <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> <p> <br/> alas !! After a busy night, it solved the problem !! Haha <br/> depressed! </P> <p> <B> due to the small Dom difference in Firefox, in the DIV containing input, except for spaces in the tag </B> </P> <p> <B> no space is allowed because childnodes [0] is used. Otherwise, click twice! </B> </P> editable content 1 <input type = "text" name = "Nn" value = "editable content 1" onblur = "Hide (this. parentnode. ID) "> editable content 2 <input type =" text "name =" Nn "value =" editable content 2 "onblur =" Hide (this. parentnode. ID) "> editable content 3 <input type =" text "name =" Nn "value =" editable content 3 "onblur =" Hide (this. parentnode. ID) "> editable content 4 <input type =" text "name =" Nn "value =" editable content 4 "onblur =" Hide (this. parentnode. ID) "> </P> <p>
