Question

Plunkr是Here

＆＃13;

for (let i = 0; i < 5; i++) {
  console.log(i);  // so I can see the loop is executing.
  // attempt 1:
  let rb = $('<input type="radio" name="answer" value="' + i + '">' + i + '<br/>');
  //rb.appendTo('#target');

  // attempt 2:
  //$('#target').append('<input type="radio" name="answer" value="' + i + '">' + i + '<br/>');

  // attempt 3:
  $('#target').append(rb);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <h1>Derp</h1>
  <div id="target">

  </div>
</body>

＆＃13;

奇怪的是，我实际上在StackOverflow上发现了这个代码，但对于我的生活，我不明白它为什么不能正常工作。 plunkr显示了我尝试的3种不同的方法。

这让我疯了。我通常是一个Angular人，对jQuery没什么需要。但是这样的SEEMS应该可行。

帮助？

Answer 1

唉。显然，这是因为我的脚本在目标div存在之前正在执行，正如朋友指出的那样。

我一直在使用异步框架和加载器这么久我甚至都没想过。不确定自90年代以来我遇到过那个特殊问题。

Answer 2

如果<div/>从一开始就在页面中，那么您的代码在DOM准备好之前就已运行，因此将其包装在document.ready处理程序中。

这是一个变体（另外重写为更具功能性）：

＆＃13;

$(() => {
  for (let i = 0; i < 5; i++) {
    $('#target').append(
      $('<input type="radio" name="answer" value="' + i + '">' + i + '<br/>')
    );
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <h1>Derp</h1>
  <div id="target"></div>
</body>

＆＃13;

或者如果您喜欢ES6并希望保存连接：

＆＃13;

// ES6 Variant
$(() => {
  for (let i = 0; i < 5; i++) {
    $('#target').append(
      $(`<input type="radio" name="answer" value="${i}">${i}<br/>`)
    );
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <h1>Derp</h1>
  <div id="target"></div>
</body>

＆＃13;

在jQuery中添加子元素

2 个答案: