javascript - 在排序数组中换行

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>");
}