免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

三種創(chuàng)建元素的方式：

1. document.write()
2. element.innerHTML
3. document.createElement()

初始HTML內(nèi)容：

<button>btn</button>
<p>p</p>
<div class="inner">inner</div>
<div class="create">create</div>

預(yù)覽：

1. document.write()

實(shí)現(xiàn)代碼：

var btn = document.querySelector('button');
btn.onclick = function() {
    document.write('<div>123</div>');
}

實(shí)現(xiàn)效果：
點(diǎn)擊“btn”按鈕之后：

2. element.innerHTML

字符串拼接方式：
實(shí)現(xiàn)代碼：

var inner = document.querySelector('.inner');
for (var i = 0; i < 10; i++) {
    inner.innerHTML += '<a href="#">123</a>';
}
inner.innerHTML = arr.join('');

實(shí)現(xiàn)效果：

var inner = document.querySelector('.inner');
var arr = [];
for (var i = 0; i < 10; i++) {
    arr.push('<a href="#">123</a>');
}
inner.innerHTML = arr.join('');

實(shí)現(xiàn)效果：

3. document.createElement()

實(shí)現(xiàn)代碼：

var create = document.querySelector('.create');
for (var i = 0; i < 10; i++) {
    var a = document.createElement('a');
    create.appendChild(a);
}

實(shí)現(xiàn)效果：

總結(jié)：

1. document.write 是直接將內(nèi)容寫(xiě)入頁(yè)面的內(nèi)容流，但是文檔流執(zhí)行完畢，則它會(huì)導(dǎo)致頁(yè)面全部重繪。
2. innerHTML 是將內(nèi)容寫(xiě)入某個(gè)DOM節(jié)點(diǎn)，不會(huì)導(dǎo)致頁(yè)面全部重繪。創(chuàng)建多個(gè)元素，結(jié)構(gòu)稍微復(fù)雜。
3. createElement() 創(chuàng)建多個(gè)元素，結(jié)構(gòu)更清晰。