用 insertBefore(newTip, list.firstChild) 可将新提示插入列表最前方，若列表为空（firstChild为null）则自动退化为appendChild；更稳妥写法是显式判断firstChild是否存在，现代推荐使用list.prepend(newTip)。
用 insertBefore 把新提示信息插入到列表最前方，关键是把新节点插入到列表第一个子元素之前；如果列表为空，则直接 appendChild 即可。
获取目标列表和创建新提示节点
先选中你要操作的列表（比如一个 <ul> 或 <ol>），再用 document.createElement 创建提示项（如 <li>）并设置内容：
const list = document.getElementById('myList');
const newTip = document.createElement('li');
newTip.textContent = '⚠️ 这是最新提示';
用 insertBefore 插入到最前面
调用 list.insertBefore(newTip, list.firstChild)。因为 firstChild 是列表中第一个子节点（可能是元素、文本或注释），把它作为参考节点，就能把新节点插在它前面 —— 也就是列表最开头：
list.insertBefore(newTip, list.firstChild);
✅ 如果列表原本有内容，新提示会成为第一个子元素；
❌ 如果列表为空（firstChild 为 null），insertBefore 会自动退化为 appendChild，仍能正确添加。
更稳妥的写法（兼容空列表逻辑）
虽然上面已能工作，但显式判断更清晰，避免误解：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“Java免费学习笔记（深入）”；
- 若
list.firstChild存在 → 用insertBefore - 若
list.firstChild为null→ 用appendChild
if (list.firstChild) {
list.insertBefore(newTip, list.firstChild);
} else {
list.appendChild(newTip);
}
补充：用 prepend() 更简洁（现代推荐）
如果你不需要兼容 IE，Element.prepend() 是更直观的选择，一行搞定，且天然支持多节点、字符串：
list.prepend(newTip); // 直接插到最前
// 或者直接传字符串
list.prepend('⚠️ 这是最新提示'); // 自动转为 Text 节点
它内部行为与 insertBefore(..., firstChild) 一致，但语义明确、代码干净。
