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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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