在排序的数组中断行

Question

我有收到字符串的用户输入，然后将其添加到数组中并显示在屏幕上。

当用户输入更多字符串时，应出现第二个列表，对列表进行排序。我无法获得第二个列表来打破数组元素之间的界限。我认为这与INNERHTML有关，但我不完全确定。

  var list =[];

  function buildString()
  {
    // adds items to the list and displays.
    var myVal = document.getElementById('input').value;
    document.getElementById('mytext').innerHTML += myVal + "<br>";

}

  function appendArray() {

  //adding input text to array
var input =document.getElementById('input').value;
list.push(input);
document.getElementById("arrayLength").innerHTML = +list.length;
    // displays the length of the array

  }

  function alphaOrder() {
    list.sort();
    document.getElementById('displayAlpha').innerHTML = list + "<br>";

    p{
      margin-left:auto;
      margin-right:auto;
      padding:2%;
      font-size:2em;
      color:#aaa;
      text-align:left;
    }

<input type="text" id="input" name="" value="">
    <button type="button" name="button" onclick="buildString(); appendArray(); alphaOrder();">Submit</button>


    <p id="mytext"></p>
    <p id="displayAlpha"> </p>
    <div id="arrayLength"> </div>

Answer 1

您需要将项目数组加入带有<br>分隔符的字符串中。

function alphaOrder() {
    list.sort();
    document.getElementById('displayAlpha').innerHTML = list.join("<br>");
}