为什么这种在将按钮附加到 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 遍历方法和数据属性。然而，最好的方法将完全取决于您的具体用例。

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

Why does this way of creating dynamically a button on jquery after appending it to DOM creates objects?

jquery

dom

dynamically-generated