怎么innerHTML重复调用后，越来越慢？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

1.DOM元素的操作本来就对性能有影响
2.字符串操作耗费时间用下面我改的代码看看效果呢
<script>
    function addRow(){
        var htmlData=[];
        var str=document.getElementById('inputdetail').innerHTML;
        htmlData.push(str)
        htmlData.push(" <div > <input type='text' maxlength='50' name = 'tname' /> </div>");
        document.getElementById('inputdetail').innerHTML = htmlData.join("") ;
    }
</script>
<div id="inputdetail"> </div>
<input type = button value = "addrow" onclick = "addRow()">
楼上说的简单，我也想用appendchild啊，问题是像这样的怎么用？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
</HEAD> <BODY>
  <script>
function addRow(){
  var inputdetail =  document.getElementById('inputdetail');
  var divTemp=document.createElement("DIV");
  var t= document.createElement("INPUT");
  t.Type="text";
  t.maxlength="50";
  t.Name="tname";
  divTemp.appendChild(t);
  alert(divTemp.innerHTML);
  inputdetail.appendChild(divTemp);
}
</script>
<div id="inputdetail"> </div>
<input type = button value = "addrow" onclick = "addRow()"/>  </BODY>
</HTML>
<script>
function addRow(){
  var htmlData="";
  var div = document.createElement('div');
  var input  = document.createElement('input');
  input.type = 'text';
  input.maxlength = '50';
  input.name = 'tname';

  div.appendChild(input);
  document.getElementById('inputdetail').appendChild(div);
}
</script>
<div id="inputdetail"> </div>
<input type = button value = "addrow" onclick = "addRow()"/>
innerHTML += 的问题。试试：function addRow(){
  var dobj = document.getElementById('inputdetail');
  var htmlData = dobj.innerHTML + " <div > <input type='text' maxlength='50' name = 'tname' /> </div>";
  document.getElementById('inputdetail').innerHTML = htmlData;
}
<script>
    function addRow(){
        var doms=document.getElementById('inputdetail');
        var div=document.createElement("div");
        var ipt=document.createElement("input");
        ipt.type="text";
        ipt.maxlength=50;
        ipt.name="tname";
        div.appendChild(ipt);
        doms.appendChild(div);
    }
</script>
<div id="inputdetail"> </div>
<input type = button value = "addrow" onclick = "addRow()">
BeenZ的，执行几百次后，效果跟原先也差不多啊没快到哪里去
主要是的时间就是花在最后一个+=上面了：
这样比较简单了：
function addRow() {
var div=document.createElement("div");
div.innerHTML="<input type='text' maxlength='50' name = 'tname' />";
document.getElementById('inputdetail').appendChild(div);
}
push的效率并不高在ie下，要使用数组也是用数组索引来访问添加元素，效率比较高
function addRow() {
    var div = document.createElement("div");
    div.innerHTML = "<input type='text' maxlength='50' name='tname' />";
    document.getElementById('inputdetail').appendChild(div);
}
如果你要做很多次拼接(+=)操作,那这个方法就会提高效率元素很多的时候慢在dom操作上,innerHTML每次都增加一遍,肯定慢
<script>
    function addRow(){
        var doms=document.getElementById('inputdetail');
        var div=document.createElement("div");
        var ipt=document.createElement("input");
        ipt.type="text";
        ipt.maxlength=50;
        ipt.name="tname";
        div.appendChild(ipt);
        doms.appendChild(div);
    }
</script>
<div id="inputdetail"> </div>
<input type = button value = "addrow" onclick = "addRow()">
如果input 有事件，比如onclick = "set()"的话，应该怎么加的？
10楼的直接添加，
或者
ipt.onclick=addRow;
<script>
    function addRow(){
        var doms=document.getElementById('inputdetail');
        var div=document.createElement("div");
        var ipt=document.createElement("input");
        ipt.type="text";
        ipt.maxlength=50;
        ipt.name="tname";
        ipt.onclick=function(){
            alert("click")
        }
        div.appendChild(ipt);
        doms.appendChild(div);
    }
</script>
<div id="inputdetail"> </div>
<input type = button value = "addrow" onclick = "addRow()">
<script>
function addRow(){
  var htmlData="";
  var div = document.createElement('div');
  var input  = document.createElement('input');
  input.type = 'text';
  input.maxlength = '50';
  input.name = 'tname';
  input.onclick = function(){
   alert('aaaaa');
  };
  div.appendChild(input);
  document.getElementById('inputdetail').appendChild(div);
}
</script>
<div id="inputdetail"> </div>
<input type = button value = "addrow" onclick = "addRow()"/>
<input type = button value = "addrow" onclick = "addRow(){"/>
这里好像错了
好的，谢谢楼上的。
还有，如果div有个css的话，要加载class = "test"的话，应该怎么加的？
<script>
function addRow(){
  var htmlData="";
  var div = document.createElement('div');
  div.style.color = 'red'; //这么加
  var input  = document.createElement('input');
  input.type = 'text';
  input.maxlength = '50';
  input.name = 'tname';
  input.onclick = function(){
   alert('aaaaa');
  };
  div.appendChild(input);
  document.getElementById('inputdetail').appendChild(div);
}
</script>
<div id="inputdetail"> </div>
<input type = button value = "addrow" onclick = "addRow()"/>
<script>
    function addRow(){
        var doms=document.getElementById('inputdetail');
        var div=document.createElement("div");
        div.class="test"
        var ipt=document.createElement("input");
        ipt.type="text";
        ipt.maxlength=50;
        ipt.name="tname";
        ipt.onclick=function(){
            alert("click")
        }
        div.appendChild(ipt);
        doms.appendChild(div);
    }
</script>
<div id="inputdetail"> </div>
<input type = button value = "addrow" onclick = "addRow()">
或者div.className = 'div';//这里写样式表里CLASS名字如.div{color:'red';}
真的谢谢楼上的了。还有最后一个问题，htmlData += " <div > <input type='text' maxlength='50' name = 'tname' /> <a href = "111.html"><img src = "11.jpg"/></a></div>"; 对于href和img的话，也能用createElement么？
能  只要是HTML标签都能
createElement("a);
和createElement("img");?
var a = document.createElement('a');
var img = document.createElement('img');
如果赋值的话就这样
a.href = '';
img.src = '';