javascript appendChild,innerHTML,join性能比较代码

复制代码 代码如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml" >

  <head>

  <title>appendChild,innerHTML,join</title>

  <script type="text/javascript"><!--

  //使用appendChild()方法添加span标签

  function AppendDiv()

  {

  var times=parseInt(document.getElementById('tbTimes').value);

  var oDiv=document.getElementById('div1');

  var Text=document.getElementById('tbText').value;

  var Time=new Date();

  var StartTime=Time.getTime();

  for(var i=1;i<times;i++)

  {

  var span=document.createElement('span');

  span.appendChild(document.createTextNode(Text));

  oDiv.appendChild(span);

  }

  var Time1=new Date();

  var EndTime=Time1.getTime();

  document.getElementById('TbDate').value=EndTime-StartTime

  }

  //使用innerhtml()方法添加span标签

  function InnerHTML()

  {

  var times=parseInt(document.getElementById('tbTimes').value);

  var oDiv=document.getElementById('div1');

  var Text=document.getElementById('tbText').value;

  var Time=new Date();

  var StartTime=Time.getTime();

  for(var i=1;i<times;i++)

  {

  oDiv.innerHTML+="<span>"+Text+"</span>";

  }

  var Time1=new Date();

  var EndTime=Time1.getTime();

  document.getElementById('TbDate').value=EndTime-StartTime

  }

  //使用 Array中push添加span

  function Join()

  {

  var times=parseInt(document.getElementById('tbTimes').value);

  var oDiv=document.getElementById('div1');

  var Text=document.getElementById('tbText').value;

  var Time=new Date();

  var StartTime=Time.getTime();

  var MyArray=new Array();

  for(var i=1;i<times;i++)

  {

  MyArray.push("<span>"+Text+"</span>");

  }

  oDiv.innerHTML=MyArray.join(' ');

  var Time1=new Date();

  var EndTime=Time1.getTime();

  document.getElementById('TbDate').value=EndTime-StartTime

  }

  // --></script>

  </head>

  <body>

  <input type="text" id="tbText" value="ws_hgo " /><br />

  <input type="text" id="tbTimes" value="1000" /><br />

  <input type="text" id="TbDate" /><br />

  <input id="Button1" type="button" value="Append" onclick="AppendDiv();" />

  <input id="Button2" type="button" value="innerHTML" onclick="InnerHTML();" />

  <input id="Button3" type="button" value="Join" onclick="Join();" />

  <div id="div1">

  </div>

  </body>

  </html>