It’s impossible to implement such a task: by clicking on $("div.block") new <div></div> element should appear immediately after it; on the second press, the same item is deleted.

Before

 ... <header></header> <div id="content"> <div class="logoblock"></div> <div class="block"></div> <div class="block"></div> </div> <footer></footer> ...

After

 ... <header></header> <div id="content"> <div class="logoblock"></div> <div class="block"></div> // кликаем <div></div> // добавляем <div class="block"></div> </div> <footer></footer> ...

I understand, of course, that toggle(click1,click2); works here toggle(click1,click2); but can't figure out how to add an item; or rather, I cannot figure out how to get to the element from which it can be added.

    2 answers 2

    Everything is done simply. There is such a function .insertAfter() to insert an element after the specified one, and a function .insertBefore() to insert before the specified element.

     $(function () { $('div.block').click(function () { $('<div>').text('my text').insertAfter(this); }); });
    • You are helping again! I, by my stupidity, used the functions .after() and .before() instead of those you specified. Now everything works. Thank! - Spirit
    • You were on the right track, but apparently entangled in the parameters. Here's how the same can be done with after() : $ (this) .after ($ ('<div>'). Text ('my text')); - GLAGOLA

    I see the solution like this (the colors are set for clarity):

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Добавление элемента</title> <script type="text/javascript" src="jquery.js"></script> <script> $(document).ready(function(){ $('#razhdel').click(function(){ $(this).append('<div id="new">New</div').css('border', '1px solid blue'); $('#new').css('background', 'blue'); }); }); </script> <style type="text/css"> #razhdel { background: red; width: 300px;` } </style> </head> <body> <div id="razhdel"> bla-bla </div> </body> </html>
    • Unfortunately, not that. For a start, I asked how to make a new block added to the block, not into it (which is important!), But next to it. - Spirit