javascript - DOM - appendChild/removeChild 到元素数组或使用 DocumentFragment 重新渲染？

Question

我有一组需要渲染到 DOM 中的项目，例如：

[
  {id: 1, nextId: 2},
  {id: 2, nextId: 3, prevId: 1},
  {id: 3, nextId: 4, prevId: 2},
  {id: 4, nextId: 5, prevId: 3},
  {id: 5, prevId: 4},
]

从数组中添加或删除项目时，我正在更新它的邻居nextId和prevId. 我还需要在 html 中更新它们。

我的问题是关于性能什么样的渲染将是有益的？

1. 仅使用appendChild并removeChild重新渲染innerHTML持有数字的邻居？
2. 或使用createDocumentFragment, 在每次更改时循环遍历数组并附加此片段。

PS请不要对外部库等提出建议。