CODEWITHSUNDEEP
javascriptjqueryhtml
Roberto Sepúlveda Bravo
Roberto Sepúlveda Bravo

Reputation: 856

How to .clone() elements according to input number

I need to clone elements according to an input number. So if I select 1, I'll have one cloned element, if I select 2, I'll have two cloned elements.

I've tried with $("elementtoclone").clone().appendTo("clonecontainer") and it work, but just the first time, because when I select another number, it just append another clon. For example, If I select 1, I'll have that one, but after if I select 2 I'll have three but I just need two.

So I've been thinking that the logic way to do this is using the .html() method instead appendTo().

So I need something like this:

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>

But that obviously doesn't work because that's how I add strings, not DOM elements.

So is there a way to add that cloned elements to a variable and then using the .html() method to show them?

Upvotes: 4

Views: 685

Answers (4)

I_Al-thamary
I_Al-thamary

Reputation: 3993

This is how you add it to the same div:

function letsClone(times){ 
  $("#clonecontainer").html('');
  for(var i=0; i<times; i++){
   var elmnt = document.getElementsByTagName("DIV")[0];
  var cln = elmnt.cloneNode(true);
  $("#clonecontainer").append(cln);
  }
}
<!DOCTYPE html>
<html>
<body>

<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>




</body>
</html>

If you need it in multi Div

function letsClone(times){ 
  $("#clonecontainer").html('');
  
  for(var i=0; i<times; i++){
   var elmnt = document.getElementsByTagName("DIV")[i];
  var cln = elmnt.cloneNode(true);
 
document.getElementById("clonecontainer").appendChild(cln)
  }
}
<!DOCTYPE html>
<html>
<body>

<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" class="original"><p>I'm gonna be cloned</p></div>

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

</div>




</body>
</html>

Upvotes: 1

Vignesh Raja
Vignesh Raja

Reputation: 8741

Simply, Append the html of the element repeatedly and replace the parent's html.

Note: The >0 check is needed else it leads to an infinite loop

function letsClone(times)
{
    var html = $("#original").html();
    while(--times > 0)
    {
        html += html;
    }
    $("#clonecontainer").html(html);
}
<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>

It can also be simplified to a single line. Using String.repeat() on the html string.

Note: IE don't support it.

function letsClone(times)
{
    $("#clonecontainer").html($("#original").html().repeat(times));
}
<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>

Upvotes: 1

Rom
Rom

Reputation: 1838

Your problem is very simple to fix. Please add .html() when clone $("#original").clone().html();, because .html() require a string, but $("#original").clone() is an element jQuery, so it is undefined, and you cannot use operator + for jQuery object.

.html() return string of jQuery object.

This is solution

function letsClone(times){
  var clons = "";
  for(var i=0; i<times; i++){
    clons = clons + $("#original").clone().html();
  }
  $("#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>

Upvotes: 1

Mamun
Mamun

Reputation: 68933

Clear the html of #clonecontainer in each function call. I will also prefer oninput instead of onchange.

I believe you want clone only the p element from #original.

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>

If you really want to clone the whole #original

Please Note: the attribute Element.id must be unique in a document, use class instead. In that case to clone use the first() of the class.

You can try the following way:

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>

Upvotes: 2

Related Questions