appendChild()向ol添加li需先用createElement创建节点再插入，不能传字符串；插开头或中间用insertBefore()，参照节点为null时等效appendChild；批量添加应使用DocumentFragment避免多次重排。
用 appendChild() 向 ol 添加新 li 最直接
浏览器原生支持，无需框架，只要拿到 ol 元素和要插入的内容，就能立刻生效。关键不是“怎么加”，而是“加什么”——你得先创建一个合法的 li 元素节点，不能直接传字符串。
常见错误是写成：olElement.appendChild("新的项")，这会报错：TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'。字符串不是节点，必须用 document.createElement('li') 创建后再设内容。
- 用
document.createElement('li')创建节点 - 用
textContent或innerHTML填充内容（优先用textContent防 XSS） - 用
olElement.appendChild(newLi)插入
想插到开头或中间？改用 insertBefore()
appendChild() 只能追加到末尾。如果需要插入到第 1 个位置、或某个特定 li 之前，就得用 insertBefore()。它接收两个参数：要插入的节点 + 参照节点（即插在谁前面）。
比如插到最前面：olElement.insertBefore(newLi, olElement.firstElementChild)；如果 ol 原本为空，firstElementChild 是 null，此时 insertBefore 会自动变成追加行为，不用额外判断。
- 参照节点为
null时，等效于appendChild - 不要传错顺序：是
insertBefore(newNode, referenceNode)，不是反过来 - 如果想插在第 2 个
li之后，就取第 3 个作为referenceNode，或用olElement.children[2]
批量添加多个 li？别循环调用 appendChild
一次加 10 个 li，如果写 10 次 appendChild，会触发 10 次 DOM 重排，性能明显变差。正确做法是用 DocumentFragment 中转：
DocumentFragment
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
