Question

Good Day Folks.

Pardon my experience with MooTools.

To sum up, the CMS generates this code:

<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>

I need to able to insert this code when the page finishes loading:

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

In a particular space. The end result should be:

<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>

So I know I would need to create a new element with the new HTML I want to add and then interject it, but unsure how as efficiently as possible. Oh and yes, I have a specific reasoning for needing to do this, but didn’t want to boggle down this post with all the extra info and code. Thanks so much in advance! I’ll keep searching on here in the mean time to see if I can figure it out.

PS. The class I’m interjecting it into exists in other parts of the page. So I would have to make sure to specify the id=”slideshow-tabs” as well.

Answer 1

Using 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');