为什么将这种方法添加到DOM后在jquery上动态创建按钮会创建对象？

Question

我不明白为什么1º选项有效，而2º无效！？使用字符串创建按钮元素可以正常工作，但是使用jquery选择器的2º参数创建按钮元素及其属性无效。它只是创建对象并将其附加到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。

请注意，如果删除join()调用并附加数组本身，则可以使使用jQuery对象的后一种方法起作用。

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属性，因为它通常会使代码变得比所需的复杂。请改用公共类，以及DOM遍历方法和数据属性。但是，最佳方法将完全取决于您的特定用例。