Как добавить HTML в существующий div с помощью MooTools

Question

Добрый день, народ.

Прошу прощения за мой опыт работы с MooTools.

Подводя итог, CMS генерирует этот код:

<div class="gk_tab gk_tab-style1 clearfix-tabs" id="slideshow-tabs" style="width: 418px; ">
    <ul class="gk_tab_ul-style1">
        <li id="slideshow-tabs_tab_1" class="active"><span>Video</span></li>
        <li id="slideshow-tabs_tab_2" class=""><span>Calendar</span></li>
    </ul>
</div>

Мне нужно иметь возможность вставить этот код после завершения загрузки страницы:

<li id="slideshow-tabs_tab_0" class=""><a><span>Video</span></a></li>

В определенном пространстве. Конечный результат должен быть:

<div class="gk_tab gk_tab-style1 clearfix-tabs" id="slideshow-tabs" style="width: 418px; ">
    <ul class="gk_tab_ul-style1">
        <li id="slideshow-tabs_tab_0" class=""><a><span>Video</span></a></li>
        <li id="slideshow-tabs_tab_1" class="active"><span>Video</span></li>
        <li id="slideshow-tabs_tab_2" class=""><span>Calendar</span></li>
    </ul>
</div>

Так что я знаю, что мне нужно будет создать новый элемент с новым HTML-кодом, который я хочу добавить, а затем вставить его, но не уверен, насколько эффективно это будет возможно. О, да, у меня есть конкретные причины для необходимости сделать это, но я не хотел смущать этот пост со всей дополнительной информацией и кодом. Большое спасибо заранее! В то же время я буду искать здесь, чтобы понять, смогу ли я это выяснить.

PS. Класс, в который я его вставляю, существует в других частях страницы. Поэтому мне нужно было бы также указать id = "slideshow-tabs".

Answer 1

Использование MooTools 1.3:

var li = new Element('li#slideshow-tabs_tab_0'), a = new Element('a'), span = new Element('span', {'text': 'Video'});
span.inject(a);
a.inject(li);
li.inject($$('#slideshow-tabs ul')[0], 'top');