How to add new li with multiple classes to UL

Question

I have the below code:

<div class="content">
    <h2>Choose a category</h2>
    <ul class="clean menu" id="topics">
        <li class="drop png">
            <a cat="ntech" class="sec_accnt" href="javascript:void(0);" name="&amp;lid=choose_category_billing" rel="1" style="BACKGROUND-POSITION: 13px -164px">Billing</a>
        </li>
       <li class="drop png">
            <a cat="tech" class="sec_homecontrol" href="javascript:void(0);" name="&amp;lid=choose_category_homecontrol" rel="1" style="BACKGROUND-POSITION: 13px -121px">Home Monitoring &amp; Control</a>
       </li>
        <li class="drop png">
            <a cat="ntech" class="sec_regis" href="javascript:void(0);" name="&amp;lid=choose_category_regis_signin" rel="1" style="BACKGROUND-POSITION: 13px -207px">Registration &amp; Sign In</a>
        </li>
    </ul>
 </div>

Now I wanted to add a new li to the list at the second place. After addin the code should look like this:

<div class="content">
    <h2>Choose a category</h2>
    <ul class="clean menu" id="topics">
        <li class="drop png">
            <a cat="ntech" class="sec_accnt" href="javascript:void(0);" name="&amp;lid=choose_category_billing" rel="1" style="BACKGROUND-POSITION: 13px -164px">Billing</a>
        </li>


        <li class="drop png">
            <a cat="tech" class="sec_net_1" href="javascript:void(0);" name="&amp;lid=choose_category_internet_fios" rel="1">FiOS Internet</a>
        </li>    <!-- Newly added li -->


       <li class="drop png">
            <a cat="tech" class="sec_homecontrol" href="javascript:void(0);" name="&amp;lid=choose_category_homecontrol" rel="1" style="BACKGROUND-POSITION: 13px -121px">Home Monitoring &amp; Control</a>
       </li>
        <li class="drop png">
            <a cat="ntech" class="sec_regis" href="javascript:void(0);" name="&amp;lid=choose_category_regis_signin" rel="1" style="BACKGROUND-POSITION: 13px -207px">Registration &amp; Sign In</a>
        </li>
    </ul>
 </div>

How can we achieve this using mootools? Im using mootools 1.3.2. I used the below line:

 $("#topics").bind('<li class="drop png"><a cat="tech" class="sec_net_1" href="javascript:void(0);" name="&amp;lid=choose_category_internet_fios" rel="1">FiOS Internet</a></li>');

But this is giving an error 'null' is null or not an object .

Answer 1

$("#topics") should be $("topics") .

var el = new Element('li', {
    class: "drop png",
    html: "FiOS Internet" // ... you may add other attributes
});
$('topics').grab(el);

I don't know mootools actually, but if you want to use it, you should read the doc more carefully: http://mootools.net/docs/core .

Answer 2

You're looking for Element.inject() .

Something like this should do the job (I've simplified it somewhat in order to better point out what to do):

var li = new Element('li'), 
    a = new Element('a'), 
    span = new Element('span', {'text': 'FiOS Internet'});
span.inject(a);
a.inject(li);
li.inject($('x1'),'after');

Notice that to get the order right, you might wanna id the li items or mark them in a similar way. This is not necessary, but it makes it a bit easier to understand.

For this example I've marked your first item like this:

<li id='x1' class="drop png">
    ....
</li>

JSFiddle: http://jsfiddle.net/tvc3n/

Answer 3

This should do it:

var newLi = new Element('li.drop.png', {
    html: '<a cat="tech" class="sec_net_1" href="javascript:void(0);" name="&amp;lid=choose_category_internet_fios" rel="1">FiOS Internet</a>'
});
$('topics').getElement('li').grab(newLi, 'after');

http://jsfiddle.net/ZB3cF/1/