不用ajax实现点击文字即可编辑的方法

  刚接触creatElement ,appendChild 等东东!呵呵!

  写了这个东西,可能在高手看来,非常的稚嫩!不过完全自己写的!

  还没有完善,请大侠指导!!

  看代码

  

复制代码 代码如下:

  <!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("已经存在在数组里!");

  //alert(str);

  var b=$(e+"fa");

  str=$(e+"faz").value;

  b.removeChild($(e+"faz"));

  x.innerText=str;

  }else{

  //alert("没有存在在数组里!");

  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')">可编辑的内容</div>

  <div class="test" id="test1" onclick="edit('test1')">可编辑的内容</div>

  </BODY>

  </HTML>

  最后解决浏览器问题的代码

  

   [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]