如何使用或不使用javascript在数字之间添加垂直线？

.number::before {
  content: "|";
  display: inline-block;
  margin-right: 5px;
}

.number {
  border-right: 1px solid black;
  padding-right: 5px;
  margin-right: 5px;
}

<p class="number">1</p>
<p class="number">2</p>
<p class="number">3</p>

<p id="numbers"></p>

<script>
var numbersContainer = document.getElementById("numbers");
var numbers = [1, 2, 3];

for (var i = 0; i < numbers.length; i++) {
  var numberElement = document.createElement("span");
  numberElement.textContent = numbers[i];
  
  if (i < numbers.length - 1) {
    var verticalLine = document.createElement("span");
    verticalLine.textContent = "|";
    verticalLine.style.margin = "0 5px";
    
    numbersContainer.appendChild(verticalLine);
  }
  
  numbersContainer.appendChild(numberElement);
}
</script>