Почему этот способ динамического создания кнопки на jquery после добавления ее в DOM создает объекты?

Question

Я не понимаю, почему вариант кода 1º работает, а 2º нет !? Использование строки для создания элемента кнопки работает нормально, но использование аргумента 2º селектора jquery для создания элемента кнопки + его свойства не работает. Он просто создает и прикрепляет объекты к DOM

<script>
var arr = [];
for(var i = 1; i <= 1000; i++){
  // 1º option to create button elem
  var boton = '<button type="button" class="btn btn- 
  primary">'+i+'</button>';
  // 2º option to create button elem
  var boton = $('<button>', {
    'text': i,
    'id': 'btn_' + i,
    'class': 'btn btn-danger'
  })
  arr.push(boton);
}


$(function(){

  $('button').after(arr.join(''));

});


</script>


<button type="button" class="btn btn-primary">
  Imprimir en consola 'Hola Mundo'
</button>

Answer 1

Первый метод работает, потому что вы создаете строку, содержащую действительный HTML.

Второй пример пытается создать строку из объекта jQuery. Это не будет работать так, как вы ожидаете, потому что он неявно вызывает toString() для объекта, что приводит к "[Object object]", а не HTML.

Обратите внимание, что последний метод, использующий объекты jQuery, может быть выполнен для работы, если вы удалите вызов join() и добавите сам массив:

var arr = [];
for (var i = 1; i <= 1000; i++) {
  var boton = $('<button>', {
    'text': i,
    'id': 'btn_' + i,
    'class': 'btn btn-danger'
  })
  arr.push(boton);
}

$(function() {
  $('button').after(arr);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-primary">Imprimir</button>

Я бы также предложил не создавать инкрементные атрибуты id для содержимого Dynami c, так как это обычно делает код более сложным, чем он должен быть. Вместо этого используйте общие классы вместе с методами обхода DOM и атрибутами данных. Однако лучший подход будет полностью зависеть от вашего конкретного варианта использования c.