0

我有以下代码：

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

4

3 回答 3

0

$("#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。

于 2013-03-11T06:54:59.743 回答
0

您正在寻找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/

于 2013-03-11T07:09:10.127 回答
0

这应该这样做：

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/

于 2013-03-11T07:11:35.547 回答