04-07
动态创建页面结构，

<script>

box.innerHTML=box.innerHTML+"<ul><li>111</li></ul>";//追加        

box.innerHTML +="<ul><li>111</li></ul>";//追
    加

</script>

08，09效率问题：
1拼接字符串，2把字符串变成dom对象，3把dom对象挂在dom树上，4还要渲染。本身消耗性能的，
先去拼接字符串，在循环里只拼接字符串，把其他的放到外边只执行一次会提高效率。

var start= +new Date();
var arr=[];//空数组存放拼接字符串
for (var i = 0; i < 100; i++) {
    //1拼接字符串
        arr.push("<ul><li>111</li></ul>");
    }
    box.innerHTML +=arr.join("");//追加
    //2把字符串变成dom对象，
    //3把dom对象挂在dom树上，
    //4还要渲染。
var end= +new Date();
console.log (end-start);

createElement ，动态创建文本框，创建列表，

for (var i = 0; i < 100; i++) {
    var ul=document.createElement("ul");
    box.appendChild(ul);
    var li=document.createElement("li");
    ul.appendChild(li);
    li,innerHTML="111";
    }   
var end= +new Date();
console.log (end-start);

动态创建文本框

//先判断 如果没有才创建，如果有就不创建，先获取id
var input=document.getElementById("t");
if(input){//判断取消重复创建。
//如果能进来说明是对象 可以找到
    return;
}
 input=document.createElement("input");
 input.id="t";
 input.type="text";
    box.appendChild(input);//创建追加生效重复创建追加了。

创建动态列表：

<script>
    var phones=["小米","苹果","vivo","华为","三星","oppo"];
    var btn=document.getElementById('btn');
    var box=document.getElementById('box');
    btn.onclick = function () {
    //防止重复创建，先添加一个id做判断，如果已存在就不创建，如果不存在就创建
    var ul=document.getElementById('u');
    //如果已存在 是对象，如果不存在是null，对象的布尔值是true；
    if (ul) {
    //如果能进来说明有了，就不再重复创建了。
        return;
    }
    //创建动态列表ul，先获取ul，
    ul=document.createElement("ul");
    ul.id="u";
    ul.className="cls";
    //追加到盒子上，追加子节点
    box.appendChild(ul);
    //对数组进行循环遍历，把phones中的元素得到
    for (var i = 0; i < phones.length; i++) {
        var phone=phones[i];//数组中的每一项元素
        //创建li并追加到ul中
        var li=document.createElement("li");
        li.innerHTML= phone;
        //追加到盒子上，追加子节点
        ul.appendChild(li);

    }
};
</script>