持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

创建新节点的方法

1. document.createElement(tag)用给定的标签创建一个元素节点
2. document.createTextNode(value)创建文本节点
3. element.cloneNode(deep)克隆元素，如果deep是true则与其后代一起克隆。

插入DOM节点或文本节点

1. node.append(...nodes or strings) 在node末尾插入
2. node.prepend(...nodes or strings) 在node开头插入
3. node.before(...nodes or strings) 在node之前插入
4. node.after(...nodes or strings) 在node之后插入

strings是以字符串的形式插入的。

插入HTML/TEXT/ELEMENT

1. insertAdjacentHTML(where, string) 字符串以HTML插入
2. insertAdjacentText(where, string) 插入文本
3. insertAdjacentElement(where, element) 插入元素

其中where取值是 beforebegin/afterbegin/beforeend/afterend

编辑DOM元素

1. 修改文本 node.textContext返回DOM元素内部文本，可以通过他修改DOM内部文本值

2. 修改HTML内容

const content = element.innerHTML;
element.innerHTML = htmlString;

element.innerHTML返回HTML 设置元素的 innerHTML 将会删除所有该元素的后代并以上面给出的 htmlString 替代。

删除和替换DOM元素

1. node.remove() 移除node。
2. second.after(first) 插入方法都会自动从旧位置删除该节点。
3. node.replaceWith(...nodes or strings)。