javascript - 如何根据输入数字.clone() 元素

Question

我需要根据输入的数字克隆元素。因此，如果我选择 1，我将拥有一个克隆元素，如果我选择 2，我将拥有两个克隆元素。

我已经尝试使用 $("elementtoclone").clone().appendTo("clonecontainer") 并且它有效，但这只是第一次，因为当我选择另一个数字时，它只需附加另一个克隆。例如，如果我选择 1，我会得到那个，但如果我选择 2，我会得到三个，但我只需要两个。

所以我一直认为这样做的逻辑方法是使用 .html() 方法而不是 appendTo()。

所以我需要这样的东西:

function letsClone(times){
  var clons;
  for(var i=0; i<times; i++){
    clons = clons + $("#original").clone();
  }
  $("#clonecontainer").html(clons);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="number" onchange="letsClone(this.value)">

<div id="original"><p>I'm gonna be cloned</p></div>

<div id="clonecontainer" style="border:1px solid red">

</div>

但这显然行不通，因为那是我添加字符串的方式，而不是 DOM 元素。

那么有没有一种方法可以将克隆的元素添加到变量中，然后使用 .html() 方法来显示它们？

Answer 1

在每个函数调用中清除#clonecontainer 的html。我也更喜欢 oninput 而不是 onchange。

我相信您只想从 #original 克隆 p 元素。

function letsClone(times){ 
  $("#clonecontainer").html('');
  for(var i=0; i<times; i++){
    var clons = $("#original > p").clone();
    $("#clonecontainer").append(clons);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="number" oninput="letsClone(this.value)">

<div id="original"><p>I'm gonna be cloned</p></div>

<div id="clonecontainer" style="border:1px solid red">

</div>

如果你真的想克隆整个#original

请注意: 属性 Element.id在文档中必须是唯一的，请改用 class。在那种情况下克隆使用类的 first()。

您可以尝试以下方式:

function letsClone(times){ 
  $("#clonecontainer").html('');
  for(var i=0; i<times; i++){
    var clons = $(".original").first().clone();
    $("#clonecontainer").append(clons);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="number" oninput="letsClone(this.value)">

<div class="original"><p>I'm gonna be cloned</p></div>

<div id="clonecontainer" style="border:1px solid red">

</div>