New course! Every coder should learn Generative AI!
Try a free lesson0
Duplicate a div on clicking add button and appending to current output? The div must be added again & again wen add clicked
13 Answers
+ 4
$("#b1").click(function(){
var div = $("#inp")[0].innerHTML;
$("body").append("<div>"+div+"</div>");
});
+ 7
You're very welcome, good luck and happy coding!! :)
+ 6
I was about to reply but you apparently already figured out how to do it :')
+ 4
You obviously need to add jQuery to your code
+ 4
Simply add this is the head tag of your html code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+ 4
Replace the the code provided by @QuentinJanuel by this fixed one:
onload = function() { // required because the JS tab in sololearn is loaded in <head> part of the html tab, and you need to wait for document loaded before accessing to one of its elements
$("#b1").click(function(){
var div = $("#inp input")[0].value; // needed to select the <input> inside your <div id="inp"> and rather access to the 'value' property, else you're only copying the empty input (without its value content)
$("body").append("<div>"+div+"</div>");
console.log('test');
});
}
Anyway, it's better practice to learn how access DOM (Document Object Model) through pure JS and browsers built-in DOM API, to be aware of how it works and be able to better use frameworks such as JQuery, if really needed ;)
Pure JS version (you could remove the JQuery reference to run it):
onload = function() {
document.getElementById('b1').addEventListener('click',function(){
var div = document.querySelector('#inp > input').value;
var target = document.getElementById('container');
var e = document.createElement('div');
e.innerHTML = div;
target.appendChild(e);
});
}
+ 3
It works for me, try putting all your js code inside of this:
$(function(){
THE CODE GOES HERE
}
+ 1
thanks☺
+ 1
yes ,It worked . thanks ☺
Is it possible that along with text input field , i can duplicate both the buttons also ?
that is , the entire div of text field and buttons?
+ 1
yes .
big thanks for your help
0
getting an uncaught reference error : $ not identified
dont know why
0
still not working 😔
0
pure js version is much tougher
Often have questions like this?
Learn more efficiently, for free:
Hot today
Questions
1 Votes
Why it's giving error
3 Votes
Questions
0 Votes
String methods
1 Votes
xampp
0 Votes
Collection
0 Votes
Code Playground
0 Votes