jquery - 使用 jQuery 追加不止一次

Question

如何在单击按钮时将变量 form 多次附加到 container 中？我在点击事件中有 3 个追加语句，它只追加一次。我希望每次点击附加 3 个 form。

Fiddle

$(document).on('click', 'button', function() {
  var form = $('.form').first().clone();
  $('.container').append(form);
  $('.container').append(form);
  $('.container').append(form);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <button>
      Click
      </button>
  <div class="form">
    Hello, World
  </div>
</div>

Answer 1

使用 outerHTML 在您需要的任何时候附加内容。 clone() 函数只创建一个副本。

https://jsfiddle.net/843yhrqs/

$(document).on('click', 'button', function() {
  var form = $('.form')[0].outerHTML;
  $('.container').append(form);
  $('.container').append(form);
  $('.container').append(form);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <button>
      Click
      </button>
  <div class="form">
    Hello, World
  </div>
</div>