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

[ccccffff]

<script>
function addRow(){
var htmlData="";
htmlData += "<div ><input type='text' maxlength='50' name = 'tname' /> </div>";
document.getElementById('inputdetail').innerHTML += htmlData ;
}
</script>
<div id="inputdetail"></div>
<input type = button value = "addrow" onclick = "addRow(){"/>

发现行追加的越多，画面执行的越慢。后来调查好像是innerHTML的问题，请问有高手能解决下么？或者用别的方法来代替innerHTML也可以。

[yangbing694383929]

bangding!

[wcwtitxu]

function addRow() {
    var div = document.createElement("div");
    div.innerHTML = "<input type='text' maxlength='50' name='tname' />";
    document.getElementById('inputdetail').appendChild(div);
}

[MuBeiBei]

[Quote=引用 6 楼 mubeibei 的回复:]
HTML code<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><divid="inputdetail"></div><inputtype= buttonvalue= "addrow" onclick= "addRow()"/>
[/Quote]

用appendChild

[BeenZ]

[Quote=引用 9 楼 ccccffff 的回复:]
BeenZ的，执行几百次后，效果跟原先也差不多啊。。。没快到哪里去
[/Quote]

如果你要做很多次拼接(+=)操作,那这个方法就会提高效率

元素很多的时候慢在dom操作上,innerHTML每次都增加一遍,肯定慢

[ccccffff]

<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()"的话，应该怎么加的？

[sohighthesky]

[Quote=引用 16 楼 ccccffff 的回复:]

<input type = button value = "addrow" onclick = "addRow()">
如果input 有事件，比如onclick = "set()"的话，应该怎么加的？
[/Quote]
10楼的直接添加，
或者
ipt.onclick=addRow;

[sohighthesky]

ipt.onclick=set;//

[BeenZ]

<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()">

[MuBeiBei]

<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()"/>

[jiangdongyixia]

<input type = button value = "addrow" onclick = "addRow(){"/>
这里好像错了

[ccccffff]

好的，谢谢楼上的。
还有，如果div有个css的话，要加载class = "test"的话，应该怎么加的？

[MuBeiBei]

<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()"/>

[BeenZ]

<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()">

[MuBeiBei]

或者div.className = 'div';//这里写样式表里CLASS名字 如.div{color:'red';}

[ccccffff]

真的谢谢楼上的了。还有最后一个问题，htmlData += " <div > <input type='text' maxlength='50' name = 'tname' /> <a href = "111.html"><img src = "11.jpg"/></a></div>";

对于href和img的话，也能用createElement么？

[MuBeiBei]

能 只要是HTML标签都能

[BeenZ]

是的,只要是dom节点

[ccccffff]

createElement("a);
和createElement("img");?

[MuBeiBei]

[Quote=引用 29 楼 ccccffff 的回复:]
createElement("a);
和createElement("img");?
[/Quote]

var a = document.createElement('a');
var img = document.createElement('img');

[MuBeiBei]

如果赋值的话就这样
a.href = '';
img.src = '';