一、.createElement() ? 創建元素

const div = document.createElement('div'); // 創建一個 div 元素

二、appendChild() 追加一個元素 | insertBefore(Ele, Target) ? 指定位置插入元素

const div = document.createElement('div'); // 創建一個 div 元素 document.getElementById('box').appendChild(div); // 創建好之后追加到 box 里面 document.getElementsByClassName('wapper').insertBeofore(div); // 把 div 插入到 .wapper 之前

三、removeChild() ? 刪除元素

const div = document.createElement('div'); // 創建一個 div 元素 document.getElementById('box').remove(div); // 從 box 中移除 div

四、innerHTML | innerText ? 給 DOM 元素 設置內容

document.getElementById('box').innerHTML = '<div>我是內容</div>'; // innerHTML 會解析標簽 document.getElementById('box').innerText = '<div>我是內容</div>'; // innerText 不會解析標簽 document.getElementsByName('user-id').value = 10; // value 一般用在表單里面

五、 replaceChild(OldEle, NewEle) ? 替換元素

const div = document.createElement('div'); // 創建一個 div 元素 document.getElementById('box').appendChild(div); // 創建好之后追加到 box 里面const p = document.createElement('p'); document.getElementById('box').replaceChild(div, p); // 把已經存在的 div 替換成 p

六、createDocumentFragment() ? 創建文檔碎片

let fra = document.createDocumentFragment(); // 創建文檔碎片for (let i = 0; i < 10; i++) {let li = document.createElement('li'); // 創建元素li.innerHTML = i; // 給元素添加內容fra.appendChild(li); // 把處理好的元素放到文檔碎片中 }aUL.appendChild(fra); // 最后把文檔碎片輸出到頁面里面

文檔碎片的優點: 因為文檔碎片存在內存里面,并不在 DOM 樹中,所以將元素插入到文檔碎片時不會引起頁面回流(reflow) (對元素位置和幾何上的計算).因此使用文檔碎片(document fragments) 通常會起到優化性能的作用(better performance).

總結

以上是生活随笔為你收集整理的DOM 元素以及内容的增删改的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。