javascript - 特定のオブジェクトにタグのリストを追加する方法

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>

---

このタスクを達成する方法はありますか?
PS: アンダースコアと 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]) );