How to create a copy of an element when a button is clicked
Question
I have been trying to learn to build websites, and I've come to an issue I cannot seem to find the answer to. I would like #buttonNewNote to create a copy of #cloneBox when it is clicked, but I can't seem to figure out how. Thank you!
Code
<html>
<body>
<div id='navbar'>
<div id='siteTitle'>
<h1> Notes.com </h1>
<button id= 'buttonNewNote'> New Note </button>
</div>
</div>
<div class='cloneBox'>
<textarea rows="4" cols="50">Enter your notes Here! </textarea>
</div>
</body>
</html>
CSS
.cloneBox {
top: 200px;
left:50px;
display: -webkit-flex;
border: 5px;
border-top: 20px;
border-style: solid;
border-color: yellow;
width:260px;
}
#noteInput {
position: relative;
min-width: 50px;
width: 200px;
height: 100px;
border: 5px;
border-top: 20px;
border-color: #3296d2;
}
What I have of the Jquery
$(document).ready( function() {
$('.cloneBox').draggable();
$('#buttonNewNote').click(function(){
$(document.createElement('div'));
$('div').html('<textarea rows="4" cols="50">Enter your notes Here!
</textarea>')
$('div').addClass('cloneBox')
});
});
Thank you so much!
6 answers
solution1
1 2017-08-11 07:46:48
You can use clone
$(document).ready(function() { $('#buttonNewNote').click(function() { $(".cloneBox").clone().appendTo("#cloneArea") }); });
.cloneBox { top: 200px; left: 50px; display: -webkit-flex; border: 5px; border-top: 20px; border-style: solid; border-color: yellow; width: 260px; } #noteInput { position: relative; min-width: 50px; width: 200px; height: 100px; border: 5px; border-top: 20px; border-color: #3296d2; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='navbar'> <div id='siteTitle'> <h1> Notes.com </h1> <button id='buttonNewNote'> New Note </button> </div> </div> <div class='cloneBox'> <textarea rows="4" cols="50">Enter your notes Here! </textarea> </div> <div id="cloneArea"></div>
solution2
0 2017-08-11 07:46:40
Try this using clone()
$('#buttonNewNote').click(function(){
var clone_box = $('body').find('.cloneBox:first');
clone_box.clone().appendTo( "body" );
});
solution3
0 2017-08-11 07:46:50
You need to use clone() to get the clone of the textarea and append it to your DOM. And ensure that textarea doesn't clone the values, so you need to reset it. Below is updated code:
$('#buttonNewNote').click(function() { var cloneObj = $(".cloneBox:first").clone(); $(cloneObj).find('textarea').val('Enter your notes Here!'); $('body').append(cloneObj); });
.cloneBox { top: 200px; left: 50px; display: -webkit-flex; border: 5px; border-top: 20px; border-style: solid; border-color: yellow; width: 260px; } #noteInput { position: relative; min-width: 50px; width: 200px; height: 100px; border: 5px; border-top: 20px; border-color: #3296d2; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <div id='navbar'> <div id='siteTitle'> <h1> Notes.com </h1> <button id='buttonNewNote'> New Note </button> </div> </div> <div class='cloneBox'> <textarea rows="4" cols="50">Enter your notes Here! </textarea> </div> </body> </html>
solution4
0 2017-08-11 07:49:44
You can do like this:
$(document).ready( function() {
$('#buttonNewNote').click(function(){
var div = $('.cloneBox').clone();
var textArea = div.find('#textarea1').RemoveAttr('id');
textArea.attr('id','textarea2');
$('.cloneBox').append(textArea;
});
});
and your html will be:
<html>
<body>
<div id='navbar'>
<div id='siteTitle'>
<h1> Notes.com </h1>
<button id= 'buttonNewNote'> New Note </button>
</div>
</div>
<div class='cloneBox'>
<textarea rows="4" cols="50" id="textarea1">Enter your notes Here! </textarea>
</div>
</body>
</html>
solution5
0 2017-08-11 07:50:27
Changing as little as possible in your code for you to see what to do:
$('#buttonNewNote').click(function() {
var note = document.createElement('div');
$(note).html('<textarea rows="4" cols="50">Enter your notes Here! </textarea>');
$(note).addClass('cloneBox');
$(note).draggable();
$('body').append(note);
});
But you should probably just take advantage of jQuery's clone function (note that you have to recall draggable):
$('#buttonNewNote').click(function() {
$('body').append($($('.cloneBox')[0]).clone());
$('.cloneBox').draggable();
});
solution6
0 2017-08-11 07:59:36
You are on the right track. For cloning elements though, I prefer to use the .clone() method, and then append that clone to the parent of the original element so that it occurs right after it in the HTML. I also added one more line to the bottom of the click function to reset the clone as also being draggable.
Don't forget to add both script tags so that you are using both jQuery and jQuery-UI.
$(document).ready( function() { var copy = $('.cloneBox').clone(); $('.cloneBox').draggable(); $('#buttonNewNote').click(function(){ $('.cloneBox:first').parent().append(copy.clone()); $('.cloneBox').draggable(); }); });
.cloneBox { top: 200px; left:50px; display: -webkit-flex; border: 5px; border-top: 20px; border-style: solid; border-color: yellow; width:260px; } #noteInput { position: relative; min-width: 50px; width: 200px; height: 100px; border: 5px; border-top: 20px; border-color: #3296d2; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id='navbar'> <div id='siteTitle'> <h1> Notes.com </h1> <button id= 'buttonNewNote'> New Note </button> </div> </div> <div class='cloneBox'> <textarea rows="4" cols="50">Enter your notes Here! </textarea> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.