DOM 元素以及内容的增删改
生活随笔
收集整理的這篇文章主要介紹了
DOM 元素以及内容的增删改
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、.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 元素以及内容的增删改的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 字符编码转换_进制转换(GB2312,G
- 下一篇: 不同制式字符串之间的转换