document.createElement(tag: string)：用给定的标签创建一个元素节点document.createElementNS(namespace: string, tag: string)：创建指定 [[002.DOM：节点与集合#命名空间|命名空间]] 下给定标签的元素节点document.createTextNode(text: string)：用给定的文本创建一个文本节点document.createComment(data: string)：用给定的内容创建一个注释节点document.createDocumentFragment()：创建一个片段节点
DocumentFragment 是一个特殊的 DOM 节点，用作来传递节点列表的包装器（wrapper）elem.cloneNode(deep?: boolean)
deep 可选，默认为 false，代表是否“深”克隆（同时克隆子孙节点）append、prepend、before、afternode.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 替换为给定的节点或字符串![[Pasted image 20240428140447.png]]
注意：
div.before('<p>Hello</p>', document.createElement('hr'))<、> 这样的符号都会被作转义处理来保证正确显示elem.insertAdjacent*elem.insertAdjacentHTML(where, html)
where：指定相对于 elem 的插入位置，必须为以下之一：
"beforebegin" —— 将 html 插入到 elem 之前"afterbegin" —— 将 html 插入到 elem 开头"beforeend" —— 将 html 插入到 elem 末尾"afterend" —— 将 html 插入到 elem 之后html：HTML 字符串，该字符串会被“作为 HTML” 插入elem.insertAdjacentText(where, text) —— 是将 text 字符串“作为文本”插入而不是作为 HTMLelem.insertAdjacentElement(where, elem) —— 插入的是一个元素节点后两个方法的存在主要是为了使语法“统一”。实际上，大多数时候只使用 insertAdjacentHTML。因为对于元素和文本，有 append/prepend/before/after 方法 —— 它们也可以用于插入节点/文本片段，而且写起来更短。
![[Pasted image 20240428141903.png]]
node.remove()注意：如果要将一个元素移动到另一个地方，则无需将其从原来的位置中删除。所有插入方法都会自动从旧位置删除该节点
[[002.DOM：节点与集合#节点内容|通过属性修改 DOM]]
parentElem.appendChild(node)：将 node 附加为 parentElem 的最后一个子元素parentElem.insertBefore(node, nextSibling)：在 parentElem 的 nextSibling 前插入 node
parentElem.insertBefore(node, parentElem.firstChild)parentElem.replaceChild(node, oldChild)：将 parentElem 的后代中的 oldChild 替换为 nodeparentElem.removeChild(node)：从 parentElem 中删除 node（假设 node 为 parentElem 的后代）以上方法都会返回插入/移除的节点
document.write(html: string)调用 document.write(html) 意味着将 html “就地马上”写入页面。这个方法来自于没有 DOM，没有标准的上古时期。
document.write 方法来写入一些东西，浏览器会像它本来就在 HTML 文本中那样使用它