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); // 最后把文档碎片输出到页面里面