动态创建元素的三种方式:
1、document.write():
a、写在函数里面的话,会冲刷掉之前的页面元素,所以一般不用或是少用;
b、会打开document.open()或关闭document.close()文档流;
c、文档流: 默认的浏览器的加载顺序是从上往下依次加载的,把当前页面加载完毕之后,就相当于关闭了文档流.
例:
<input type="text" value="123"/><input type="button" οnclick="f1();"value="动态生成元素"/>
<div id="d">
<script>
document.write("789");
</script>
</div>
<script>
document.write("<input type='text' value='22222'/>");
function f1(){
document.write("<input type='text' value='8888'/>");
}
</script>
2、innerHTML:
a、比较方便,但要注意尽量不要频繁的拼接字符串;
b、字符串具有不可变性,最好先将标签字符串放在数组中,会节省内存空间,提升性能;
c、标签.innerHTML:会获得所有的子标签元素,可用于赋值拷贝
innerHTML= "":会删除所有子标签节点.慎用,注意赋值先后.
例:
<input type="button" value="创建元素" id="btn"/>
<div id="d"></div>
<script>
var d=document.getElementById("d");
var btn=document.getElementById("btn");
btn.οnclick= function () {
for(var i=0;i<10;i++){
d.innerHTML +="<input type='text' value='8888'><br/>";
}
}
3、document.createElement:
a、创建的是一对标签,是生成在内存当中的;
b、appendChild()是将内存中生成标签剪切到需要追加的位置
例:
<div id="d">
</div>
<script>
var id=document.getElementById("d");
var ul=document.createElement("ul");
var li=document.createElement("li");
id.appendChild(ul);
ul.appendChild(li);
li.innerHTML="添加的元素";
</script>