如何为给定对象附加标记列表

Question

我有以下用例

HTML输入：

<div class='controls'>
</div>

---

我的javascript代码不起作用

var errors = ['error1', 'error2'];
inputElement.closest('.controls')
    .append($('<span/>').text(errors).addClass('error-message'));

---

输出应为：

<div class='controls'>
     <span class='error-message'>error1</span>
     <span class='error-message'>error</span>
</div>

---

任何想法如何完成这项任务？
P.S。：我可以使用下划线和jquery

Answer 1

这样可行：

var errors = ['errors1', 'errors2'];

$.each(errors, function() {
    $("<span>", { text : this, class : "error-message" }).appendTo("div.controls);
});

Answer 2

_.each(errors, function(e){
  inputElement.closest('.controls')
    .append($('<span>').text(e).addClass('error-message'));
}

Answer 3

$('.controls')
  .append( $('<span>').addClass('error-message').text(errors[0]) )
  .append( $('<span>').addClass('error-message').text(errors[1]) );