0

Никак вот не получается реализовать такую задачу: по нажатию на $("div.block") должен появляться новый элемент <div></div> сразу за ним; по второму нажатию этот же элемент удаляется.

До

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

После

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

Понимаю, конечно, что здесь работает toggle(click1,click2);, но не могу понять как добавлять элемент; точнее не могу понять как добраться до элемента, от которого его можно добавить.

2 ответа 2

3

Все делается просто. Есть такая функция .insertAfter() для вставки элемента после указанного, и функция .insertBefore() для вставки до указанного элемента.

$(function () {
    $('div.block').click(function () {
         $('<div>').text('my text').insertAfter(this);
    });
});
2
  • Вы снова помогаете! Я, по своей глупости использовал функции .after() и .before() вместо вами указанных. Сейчас всё работает. Спасибо!
    – Spirit
    20 июл 2011 в 22:14
  • Вы были на правильном пути, но по всей видимости запутались в параметрах. Вот как тоже самое можно сделать при помощи after(): $(this).after($('<div>').text('my text'));
    – GLAGOLA
    21 июл 2011 в 6:13
0

я вижу решение таким (цвета заданы для наглядности):

<!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>
1
  • К сожалению, не то. Для начала я спрашивал, как сделать, чтобы по клику на блок добавлялся новый, не в него (что важно!), а рядом с ним.
    – Spirit
    20 июл 2011 в 19:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.