一、DOM元素中的增加、删除、修改

1、创建元素

const div = document.createElement('div'); // 创建一个 div 元素

2、增加元素

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

3、删除元素

const div = document.createElement('div'); // 创建一个 div 元素
document.getElementById('box').remove(div); // 从 box 中移除 div

4、给 DOM 设置内容

document.getElementById('box').innerHTML = '<div>我是内容</div>'; // innerHTML 会解析标签
document.getElementById('box').innerText = '<div>我是内容</div>'; // innerText 不会解析标签
document.getElementsByName('user-id').value = 10; // value 一般用在表单里面

5. 替换元素

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