JavaScript DOM三種創建元素的方式


三種創建元素的方式:

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

初始HTML內容:

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

預覽:

1. document.write()

實現代碼:

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

實現效果:
點擊“btn”按鈕之后:

使用document.write()創建元素,如果頁面文檔流加載完畢,再調用事件會導致頁面重繪

2. element.innerHTML

字符串拼接方式:
實現代碼:

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

實現效果:

添加數組元素方式:
實現代碼:

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

實現效果:

3. document.createElement()

實現代碼:

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

實現效果:

總結:

  1. document.write 是直接將內容寫入頁面的內容流,但是文檔流執行完畢,則它會導致頁面全部重繪
  2. innerHTML 是將內容寫入某個DOM節點,不會導致頁面全部重繪。創建多個元素,結構稍微復雜。
  3. createElement() 創建多個元素,結構更清晰。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2024 CODEPRJ.COM