DOM - appendChild/removeChild to array of elements or re-render with DocumentFragment?

Question

I have an array of items that I need to render into the DOM, for example:

[
  {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},
]

When adding or removing item from the array I'm updating its' neighbors nextId and prevId. I need to update them in html as well.

My question is regarding to performance what kind of rendering will be beneficial?

1. Use appendChild and removeChild and re-render only innerHTML of neighbors holding numbers?
2. Or use createDocumentFragment, looping through array on every change and append this fragment.

P.S. Please no advices with external libs etc.