Question

美好的一天。

请原谅我对MooTools的体验。

总而言之，CMS会生成以下代码：

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

我需要在页面加载时插入此代码：

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

在特定的空间。最终结果应该是：

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

所以我知道我需要使用我想要添加的新HTML创建一个新元素然后插入它，但不确定如何尽可能高效。哦，是的，我有一个特定的理由需要这样做，但不想让所有额外的信息和代码陷入这篇文章。非常感谢提前！我会一直在这里继续搜索，看看能否解决这个问题。

PS。我正在插入它的类存在于页面的其他部分。所以我必须确保同时指定id =“slideshow-tabs”。

Answer 1

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

如何使用MooTools将HTML添加到现有div中

1 个答案: