layui timeline 动态追加节点必须调用 timeline.render() 全量重渲染，传入包含新节点的完整 data 数组，不可直接操作 dom；否则会导致图标错位、时间轴断裂及后续渲染异常。
layui timeline 如何用 JS 动态追加节点
不能直接往 layui.timeline 渲染后的 DOM 里塞 HTML，必须走 layui 的 timeline 模块重绘流程。官方没暴露「单个添加」方法，得靠重新渲染整条时间线实现动态更新。
timeline.render() 是唯一可靠入口
layui 的 timeline 模块不支持增量更新，每次新增节点都得调用 timeline.render() 传入完整数据。这不是性能缺陷，而是设计如此——它内部会清空容器再重建全部 DOM。
- 必须保证传给
elem的容器是初始渲染时用的那个（比如#demo），不能换 DOM 节点 -
data字段必须是数组，每个元素结构和初始化时一致：{title: 'xxx', content: 'xxx', time: 'xxx'} - 如果原数据存在变量中（如
let items = []），新增节点就items.push(newItem)，再全量重 render
常见错误：直接 innerHTML 或 appendChild
这么写看似能显示，但会导致图标错位、时间轴断裂、响应式失效，甚至后续调用 timeline.render() 报错：
document.getElementById('demo').innerHTML += '<div class="layui-timeline-item">...</div>'
原因：layui timeline 依赖自身生成的 class 和嵌套结构（比如 layui-timeline-axis、layui-timeline-content），手动拼 HTML 无法同步这些逻辑。
完整示例：点击按钮添加一个节点
假设你已初始化过 timeline，数据存在 let timelineData = [...] 中：
let timelineData = [
{title: '初始化', content: '页面加载完成', time: '2024-01-01'}
];
// 初始渲染
layui.use('timeline', function(){
let timeline = layui.timeline;
timeline.render({
elem: '#demo',
data: timelineData
});
});
// 动态添加
document.getElementById('addBtn').onclick = function(){
timelineData.push({
title: '新事件',
content: '这是第 ' + (timelineData.length + 1) + ' 个节点',
time: new Date().toISOString().split('T')[0]
});
// 必须重 render 全量数据
layui.timeline.render({
elem: '#demo',
data: timelineData
});
};
注意：如果 timeline 容器有自定义样式（比如 max-width、padding），确保重 render 前后容器 DOM 未被其他脚本移除或替换，否则 elem 查找不到会静默失败。
