如何向UL添加具有多個類的新li

Question

我有以下代碼：

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

現在，我想在列表的第二個位置添加一個新的li。 在addin之后，代碼應如下所示：

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

我們如何使用mootools實現這一目標？ 我正在使用mootools 1.3.2。 我使用了以下行：

 $("#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>');

但這給出了錯誤'null' is null or not an object 。

Answer 1

$("#topics")應該是$("topics") 。

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

我實際上並不了解mootools，但是如果您想使用它，則應該更仔細地閱讀文檔： http : //mootools.net/docs/core 。

Answer 2

您正在尋找Element.inject（） 。

這樣的事情應該可以完成工作（為了更好地指出要做什么，我已經對其進行了一些簡化）：

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

請注意，以獲得正確的順序，你可能會想id的li項目或類似的方式將它們標記。 這不是必需的，但使它更容易理解。

在此示例中，我將您的第一個項目標記為：

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

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

Answer 3

應該這樣做：

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/