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列表。添加后，代码应如下所示：

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

如何将多个类的新li添加到UL

3 个答案: