如何将一个静态<li>设置为泛型中的最后一个条目，<ul>其中包含许多<li>

Question

我有泛型（所有数据都将加载到javascript/jquery函数中）列表。

功能：

var contentarticles = articles.contentarticles,
    article,
    $out = $("#articlesOutput");
    contentarticlesAll = contentarticles;
    for (var i = 0; i < contentarticles.length; i++) {
        if (!article || article.title != contentarticles[i].title) {
            article = contentarticles[i];
            document.getElementById('articleForNaviTopTitle').innerHTML = contentarticles[currentImageNr - 1].title;
            document.getElementById('articleForNaviTopStepNr').innerHTML = currentImageNr;
            var articlesOutput = [
                '<li><a href="./certifiedTraining.html?step=', i + 1, '">',
                article.title,
                '</li>'
            ].join("");
            $out.append(articlesOutput);
        }
    }

它看起来像：

1. step 1
2. step 2
3. step 3

但我想在其中添加一些静态链接。这样做：

<ul id="articlesOutput">
    <li> <a href="./certifiedTraining.html?step=fragenkatalog">Fragenkatalog</a></li>
</ul>

和它的输出：

    1. Fragenkatalog
    2. step 1
    3. step 2
    4. step 3

如何使静态条目作为最后一个，像这样？

  1. step 1
  2. step 2
  3. step 3
  4. Fragenkatalog

Answer 1

您可能应该使用 before 方法。这会将内容添加为元素的前面同级。

首先，存储对要保留在末尾的元素的引用。

$out = $("#articlesOutput"),
$last = $out.children().first();

然后在该元素之前插入新内容：

$last.before(articlesOutput);

Answer 2

你必须

使用jquery并使用此代码来获取

$(document).ready(function(){
     $("#articlesOutput").append("<li>Fragenkatalog</li>");
 });