节点插入

插入方法

这里是更多的元素插入方法，指明了不同的插入位置：
node.append(…nodes or strings) —— 在 node 末尾 插入节点或字符串，
node.prepend(…nodes or strings) —— 在 node 开头 插入节点或字符串，
node.before(…nodes or strings) —— 在 node 前面 插入节点或字符串，
node.after(…nodes or strings) —— 在 node 后面 插入节点或字符串，
node.replaceWith(…nodes or strings) —— 将 node 替换为给定的节点或字符串。在这里插入图片描述

插入代码字符串

为此，我们可以使用另一个非常通用的方法：elem.insertAdjacentHTML(where, html)。
该方法的第一个参数是代码字（code word），指定相对于 elem 的插入位置。必须为以下之一：
“beforebegin” — 将 html 插入到 elem 前插入，
“afterbegin” — 将 html 插入到 elem 开头，
“beforeend” — 将 html 插入到 elem 末尾，
“afterend” — 将 html 插入到 elem 后。第二个参数是 HTML 字符串，该字符串会被“作为 HTML” 插入。