сложность в динамическом добавлении div после другого существующего div

Question

Я пытаюсь сделать точечный слайдер таким же, как в этом .Но я с трудом понимаю это. demo .

Вот HTML-код

<div id="demo3" class="webwidget_slideshow_dot">
        <ul>
            <li><a href="link1" title="Sky"><img src="images/img_1.png" width="517" height="343" alt="slideshow_large"/></a></li>
            <li><a href="link2" title="Sea"><img src="images/img_2.png" width="517" height="343" alt="slideshow_large"/></a></li>
            <li><a href="link3" title="Flower"><img src="images/img_3.png" width="517" height="343" alt="slideshow_large"/></a></li>

        </ul>
    </div>

Вот скрипт

function init(){
        x.find("ul:first").wrap('<div class="slides_box"></div>');
        x.css("width",q).css("height",r);
        x.find(".slides_box").css("width",q).css("height",r);
        x.find("ul:first").width(parseInt(q)*y);
        x.find("ul:first").children("li").css("width",q).css("height",r);
        x.find("ul:first").children("li").children("a").children("img").css("width",q).css("height",r);
        x.find('#demo3').after('<div class="title_thumb_box"></div>');
        x.find(".title_thumb_box").append('<div class="title_box"></div>');
        x.find(".title_thumb_box").append('<div class="thumb_box"></div>');
        x.find(".title_thumb_box").css("background-color",sf);
 }

В скрипте <div class="slides_box"/> динамически переноситсясписок.Затем <div class"title_thumb_box"> добавляется после div class='slides_box'.Вот почему точки отображаются внутри контейнера.

Я пытаюсь добавить его после <div id="demo3"/>.Когда я пытался, я не мог.Я пытаюсь отобразить точки вне контейнера слайдов "# demo3", чтобы я мог добавить границы к контейнеру, как на img.

Вот jsfiddle

Answer 1

Если я правильно понимаю, вы хотите добавить .title_thumb_box вне контейнера # demo3.

Для этого просто измените строку:

x.find('#demo3').after('<div class="title_thumb_box"></div>');

до

x.find('.slides_box').after('<div class="title_thumb_box"></div>');

Это добавит .title_thumb_box после # demo3 div.