Insert elements into dom via map or foreach?

Question

JavaScript

document.querySelector("#mapBtns").innerHTML = coords
    .map(
      (e, i) =>
        `<button class="map-btn ${
          i == 0 ? "active" : ""
        }" data-coord="${JSON.stringify(e.coord)}">${e.title}</button>`
    )
    .join("");

Or through foreach to sort through and using createelement appendchild?