为什么我的代码在每个元素后返回一个逗号？

Question

我试图返回每个元素前面带有索引的数组，并删除每个元素后面的逗号。我能够将每个元素返回到一个新行，但push()仍然无法获得编号列表。我试过在我的 js 中也使用<li>and 。我在这里错过了什么？<ol><div>// TODO keep the student list state in a global listvar roster = new Array("");function addStudent() {    // TODO lookup the user entered text    var newStudent = document.getElementById("student").value;    // TODO store the new student name in global list    roster.push("<div>" + newStudent + "</div>");    // TODO render the entire list into the output div    roster.innerHTML = roster.join('');    document.getElementById("output").innerHTML = "Student List" + roster;    return false;} function init() {    // TODO register the onsubmit for 'theForm' to use addStudent    if (document && document.getElementById) {        document.getElementById('theForm').onsubmit = addStudent;    }} window.onload = init;    <form action="#" method="post" id="theForm" novalidate>        <fieldset>            <legend>Enter a student name to add to the roster</legend>            <div><label for="student">Student Name</label><input type="text" name="student" id="student"></div>            <input type="submit" value="Add to Roster" id="submit">            <div id="output"></div>        </fieldset>    </form>    <!-- <script src="js/students.js"></script> -->

Answer 1

而不是依赖innerHtml，您应该只从roster. 为了将其转换为有序列表，您应该将结果字符串用<ol>and括起来</ol>，并<li>为每个元素添加一个标签。请注意，roster数组应初始化为空数组，而不是包含以下内容的数组""：

var roster = new Array();

function addStudent() {

    // TODO lookup the user entered text

    var newStudent = document.getElementById("student").value;

    // TODO store the new student name in global list

    roster.push("<div>" + newStudent + "</div>");

    // TODO render the entire list into the output div

    rosterStr = '<ol>' + roster.map(r => `<li>${r}</li>`).join('') + '</ol>';

    document.getElementById("output").innerHTML = "Student List" + rosterStr;

    return false;

}

Answer 2

改变：

roster.innerHTML = roster.join('');

document.getElementById("output").innerHTML = "Student List" + roster;

到（或类似的）

document.getElementById("output").innerHTML = `

Student List:

<ol>

 <li>${roster.join('</li><li>')}</li>

</ol>`

的原因,是"Student List" + roster因为它是一个字符串数组，即roster.toString()

扩展示例：

let roster = ['Steve', 'Bill']

// wrong

console.log('toString:', roster.toString())

// wrong

document.getElementById("output").innerHTML = 'Wrong<br>'

document.getElementById("output").innerHTML += "Student List" + roster;

// right (using join, there is various other ways to build output)

document.getElementById("output").innerHTML += '<br><hr>Right<br>'

document.getElementById("output").innerHTML += `

Student List:

<ol>

 <li>${roster.join('</li><li>')}</li>

</ol>

`

<div id="output"></div>

Answer 3

这是一种在占位符元素内创建有序列表的替代方法。它不使用数组，而是使用文档作为状态。

它没有使用 sting 连接，而是使用编程方法来创建新元素并将其附加到文档中。

// Creates an `<ol>` element in the target node if none can be found

// or returns an existing list

function createList(target) {

  let list = output.querySelector('ol') || document.createElement("ol");

  // append the element if its a newly created element

  if (!list.parentNode) target.appendChild(list);

  return list;

}

// Appends a <li> element to the list with the text provided by the name argument

function addStudent(name, list){

  let student = document.createElement('li');

  student.appendChild(document.createTextNode(name));

  list.appendChild(student);

  return student;

};

// This adds an event listener which catches the 

// submit event as it bubbles up to the top of the dom.

// Since we are not attaching the handler directly 

// to the element we don't have to wait for the document to be ready

document.addEventListener('submit', function(event){

  let form = event.target;

  let output = document.getElementById('output');

  // bail early if this isn't the right form or there is no output

  if (form.id !== 'theForm' || !output) return; 

  event.preventDefault(); // prevents the normal form submission

  addStudent(form["student"].value, createList(output));

});

<div id="output"></div>

<form action="#" method="post" id="theForm" novalidate>

  <fieldset>

    <legend>Enter a student name to add to the roster</legend>

    <div><label for="student">Student Name</label><input type="text" name="student" id="student"></div>

    <input type="submit" value="Add to Roster" id="submit">

    <div id="output"></div>

  </fieldset>

</form>

我选择动态创建元素的原因是没有任何项目的列表元素是无效的 HTML。