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，在每次更改时循环遍历数组并附加此片段。

P.S。请不要使用外部库等。