0

Duplicate a div on clicking add button and appending to current output? The div must be added again & again wen add clicked

https://code.sololearn.com/Wm7q2XZ0vl9M/?ref=app

14th Jan 2018, 12:16 PM
muhammed rizwan
muhammed rizwan - avatar
13 Respuestas
+ 4
$("#b1").click(function(){ var div = $("#inp")[0].innerHTML; $("body").append("<div>"+div+"</div>"); });
14th Jan 2018, 12:26 PM
Dapper Mink
Dapper Mink - avatar
+ 7
You're very welcome, good luck and happy coding!! :)
14th Jan 2018, 12:53 PM
Dapper Mink
Dapper Mink - avatar
+ 6
I was about to reply but you apparently already figured out how to do it :')
14th Jan 2018, 12:51 PM
Dapper Mink
Dapper Mink - avatar
+ 4
You obviously need to add jQuery to your code
14th Jan 2018, 12:30 PM
Dapper Mink
Dapper Mink - avatar
+ 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>
14th Jan 2018, 12:31 PM
Dapper Mink
Dapper Mink - avatar
+ 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); }); }
14th Jan 2018, 12:57 PM
visph
visph - avatar
+ 3
It works for me, try putting all your js code inside of this: $(function(){ THE CODE GOES HERE }
14th Jan 2018, 12:37 PM
Dapper Mink
Dapper Mink - avatar
+ 1
thanks☺
14th Jan 2018, 12:31 PM
muhammed rizwan
muhammed rizwan - avatar
+ 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?
14th Jan 2018, 12:41 PM
muhammed rizwan
muhammed rizwan - avatar
+ 1
yes . big thanks for your help
14th Jan 2018, 12:52 PM
muhammed rizwan
muhammed rizwan - avatar
0
getting an uncaught reference error : $ not identified dont know why
14th Jan 2018, 12:30 PM
muhammed rizwan
muhammed rizwan - avatar
0
still not working 😔
14th Jan 2018, 12:34 PM
muhammed rizwan
muhammed rizwan - avatar
0
pure js version is much tougher
14th Jan 2018, 2:05 PM
muhammed rizwan
muhammed rizwan - avatar