从使用JS或jQuery的数组输出错误列表到特定的div

Question

我找不到一个例子来说明如何在特定的div中这样做。

我有一个div #error-list和一个包含任意数量错误消息的数组error，例如：

var errors = ["First name is blank", "Last name is blank", "Company name is blank", "Email is blank"]

我希望将这些错误作为ul li列表单独输出到#error-list div中。

这是怎么做的？我见过创建每个li的示例，但没有指定它们的输出位置。例如：

for (i = 0; i < myArray.length; i++) {
    var liElement = document.createElement('li');
    liElement.appendChild(myArray[i]);
}

Answer 1

当您包含了jQuery时，请使用jQuery。

var str = "";
errors.forEach(function(error){
    str += '<li>' + error + '</li>' // build the list
});
$('#error-list').html('<p>There were some errors</p>')
                .append('<ul>' + str + '</ul>'); // append the list

Answer 2

使用下一段代码创建元素

var myArray = ['1','2','3']
for (i = 0; i < myArray.length; i++) {
    var liElement = document.createElement('li');
    var txt = document.createTextNode(myArray[i])
    liElement.appendChild(txt);
}

主要的要点是您必须创建文本节点，然后将其附加到liElement中。

var txt = document.createTextNode(myArray[i])
liElement.appendChild(txt);

Answer 3

您还可以使用join()和append()这样做

演示

var errors = ["First name is blank", "Last name is blank", "Company name is blank", "Email is blank"];
$("#error-list").empty().append(function(){
    return "<ul><li>" + errors.join("</li><li>") + "</li></ul>";
});