3_3：创建 元素节点

一  向文档流写入内容  document.write() 

1）基本语法

document.write('text'); //不常用 了解就可以
需要向文档流中写入内容，所以，若在一个已关闭（例如，已完成加载）的文档上调用 document.write，就会自动调用 document.open，这将清空该文档的内容。 

2）代码验证

<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');
    btn.addEventListener('click', function () {
        document.write('<div>123</div>')
    })
</script>
 按钮没有点击前的DOM结构
点击按钮后 页面被重新绘制 以前的元素都没有了

二 element.innerHtml

1）效率比较

//字符串拼接
function countTime() {
    var startTime = +new Date();
    for (var i = 0; i < 1000; i++) {
        document.body.innerHTML += "<a href = '#'>百度</a>";
    }
    var endTime = +new Date();
    console.log(endTime - startTime);
}
countTime();//用时 1061 毫秒

//数组拼接
function countTime() {
    var startTime = +new Date();
    var arr = [];//声明空数组
    for (var i = 0; i < 1000; i++) {

        arr.push("<a href = '#'>百度</a>");
    }
    document.body.innerHTML = arr.join();
    var endTime = +new Date();
    console.log(endTime - startTime);
}
countTime();//用时 3 毫秒

2）注意事项

// 是将内容写入某个 DOM 节点 不会导致页面重绘
// 赋值节点的时候，不会赋值原先节点的事件 会存在内存泄漏

三 document.createElement()

1）基本语法

document.createElement()//元素节点 [ 最常用 ]
document.createAttribute() // 属性节点
 document.createTextNode()// 文本节点  
document.createComment()// 注释节点
nodeList = document.getElementsByName(name); //返回对象集合
注：name参数在XHTML中使用

2）执行效率

function countTime() {
    var startTime = +new Date();
    for (var i = 0; i < 1000; i++) {
        var div = document.createElement('div');
        div.style.width = '100px';
        div.style.height = '2px';
        div.style.border = '1px solid red';
        document.body.appendChild(div);
    }
    var endTime = +new Date();
    console.log(endTime - startTime);
}
countTime();//用时7毫秒

二者的区别

// . 创建元素多 用 innerHtml 效率更高 ( 不要用拼接字符串 采取数组形式拼接 )

// . 创建元素少 用createElement()

总结：innerHTML 用数组的形式 效率比createElement()高