$('#next').click(function() { var key = Math.floor(Math.random()*1000); var nam = Math.floor(Math.random()*1000); var p1 = $('<div class ="m1">'+ key +'</div>'); var p2 = $('<div class ="m2">'+ nam +'</div>'); $('<div class ="block"></div>').prependTo('#blocks'); $(p1).attr('id', key).prependTo('.block'); $(p2).attr('name', nam).prependTo('.block'); }); 
 #blocks { float: left; } .block { width: 600px; height: 40px; margin-bottom: 10px; border-radius: 10px; text-align: center; background: white; } .m1, .m2 { width:100px; height:20px; float:left; border:1px solid #000; margin:10px 10px 10px 10px; border-radius: 10px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id='next'>More</button> <div id="blocks"></div>

Hello. It’s impossible to dynamically add a div with 2 more divs Dynamically from the database I get values ​​in key and nam and I want to add a div with them, inside which there is a div with the value key and a div with the value nam

I want on the same line to add one div inside with two divas with key and nam

Closed due to the fact that off-topic participants are Alexey Shimansky , aleksandr barakin , cheops , user194374, D-side 11 Jul '16 at 12:33 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • “Questions asking for help with debugging (“ why does this code not work? ”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question . Questions without an explicit description of the problem are useless for other visitors. See How to create minimal, self-sufficient and reproducible example . " - aleksandr barakin, cheops, community spirit
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • What does it mean Никак не получается добавить and Все криво получается ? Concrete. Need specifics ..... - Alexey Shimansky
  • before the var what the garbage? - Jean-Claude
  • @ Alexey Shimansky, specifics: see the code snippet better than it can not explain. Everyone calls at each other, I think I messed up something with styles. - Oleg Ivanov
  • @ Jean-Claude corrected - Oleg Ivanov
  • one
    @ OlegIvanov i.stack.imgur.com/afEhE.jpg ........ a bug with an unknown problem is not reproduced .... and therefore the question can be closed, as poorly stated, as it is not reproduced, etc. - Alexey Shimansky

1 answer 1

Something wise with .prependTo() . Make it easier: the HTML code template that will be inserted. There are special lines in it that are not confused with anything ( %KEY% , %NAM% ) - then we will replace them with values.

By clicking, we get the values, collect the finished html by taking the template and replacing the special lines with the values ​​in it, and insert this code at the beginning of the contents of the desired div 'a:

 var tmpl = [ '<div class="block">', ' <div class="m1" id="%KEY%">%KEY%</div>', ' <div class="m2" name="%NAM%">%NAM%</div>', '</div>' ].join("\n"); var el = document.getElementById('blocks'); function addMore() { var key = Math.floor(Math.random()*1000); var nam = Math.floor(Math.random()*1000); var html = tmpl .replace(/%KEY%/g, key) .replace(/%NAM%/g, nam) ; el.innerHTML = html + el.innerHTML; } $('#next').on('click', addMore); 
 #blocks { float: left; } .block { width: 600px; height: 40px; margin-bottom: 10px; border-radius: 10px; text-align: center; background: white; } .m1, .m2 { width:100px; height:20px; float:left; border:1px solid #000; margin:10px 10px 10px 10px; border-radius: 10px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id='next'>More</button> <div id="blocks"></div>

PS it is more convenient to keep the code of a large template without quotes and an array by wrapping it in a <script> . Pay attention to type="text/template" - such a "script" will not be executed, but its content can then be obtained:

 <script type="text/template" id="tmpl-block"> <div class="block"> <div class="m1" id="%KEY%">%KEY%</div> <div class="m2" name="%NAM%">%NAM%</div> </div> </script>

Get its content in the script by id :

 var tmpl = document.getElementById('tmpl-block').innerHTML;
  • but nevertheless, c prependTo how to do it and where I have wondered, I would like to understand the future for myself - Oleg Ivanov
  • And now how can I access the class .block and output the value of attr ('id'), I used to call it $ ('# blocks'). On ('click', '.block', function () {console.log ($ (this) .attr ('id'));}); - Oleg Ivanov
  • with prepend() instead of the string el.innerHTML = html + el.innerHTML; can be written like this: $('#blocks').prepend(html); - Sergiks
  • click to catch an element with KEY, it has a class m1 , something like this: $('#blocks').on('click', '.block .m1', function() { console.log($(this).attr('id')); }); - Sergiks