如何使用 Javascript 在列表 (ul) 中的现有项之间插入列表项 (li)

Question

前段时间我写了一个转换，将数据从 xml 文件输出到 html。它有效，但它是一个非常混乱的代码，因为我不经常写 Javascript 我不知道我是如何得到这段代码的运行.

到目前为止，此代码将 li-items（每个包含一个 link）插入到一个空的 ul-container 中，id="xmlMenuRight"。

新的情况是这个容器不再是空的。将有 2 个硬编码项目。一个在第一个位置，另一个在最后一个位置。

此转换中的所有 li-items 都应插入现有的第一个和最后一个 li-item 之间。

我假设它将是 insertBefore 和 appendChild 的混合体。但我在这里迷路了，几乎和理解我自己的代码一样多。非常感谢有关如何以最佳方式执行此操作的一些帮助和建议。

来自文件的输入：

<item>
    <origin>name of a country or region</origin>
    <sitemap>no</sitemap>
    <link>/folder/2015-subFolder/filename.html</link>
    <title>Dining Room</title>
</item>

（名为 origin 和 sitemap 的 2 个字段无关）。

在 xmlhttprequest

期间进行转换

var xmlhttp = "";
var xmlDoc = "";
function loadXMLDoc(dname)  {
    if (window.XMLHttpRequest)
        {   xmlhttp=new XMLHttpRequest();   }   // for IE7+, Firefox, Chrome, Opera, Safari
    else
        {   xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); }       // for IE6

    xmlhttp.onreadystatechange=function()   {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)   {
            xmlDoc = xmlhttp.responseXML;

    xmlDoc = xmlhttp.responseXML;
    var inputList = xmlDoc.getElementsByTagName('item');
    for (var i=0;i<inputList.length;i++) {
        var x = document.createElement('li');

        x.setAttribute('typeof',"ListItem");
        x.setAttribute('property',"itemListElement");
        x.className = 'side';

        var y = document.createElement('meta');
        y.setAttribute ('content',[i+1]);
        y.setAttribute ('property',"position");

        var lnk1 = document.createElement('a');
        var lnk2 = getNodeValue(inputList[i],'link');
        var lnk3 = getNodeValue(inputList[i],'title');

        lnk1.setAttribute('href',lnk2);
        lnk1.setAttribute('typeof',"WebPage");
        lnk1.setAttribute('property',"item");

        var ele3 = document.createElement('span');
        ele3.setAttribute('property',"name");
        ele3.innerHTML = lnk3;

        var ele4 = lnk1.appendChild(ele3);

        x.appendChild(lnk1);
        x.appendChild(y);

        document.getElementById('navigation2').appendChild(x);
                }
        }
    }
    xmlhttp.open('GET',dname,true); //asynchronous method
    xmlhttp.send();
}

函数 getNodeValue(obj,tag)

{   return obj.getElementsByTagName(tag)[0].firstChild.nodeValue;   }

每个 li-item 的当前输出：

<li class="side" property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" href="/folder/2015-subFolder/filename.html"><span property="name">Dining Room</span></a><meta property="position" content="1"></li>

预期的新列表：

<ul id="xmlMenuRight">
    <li>first item is hard coded</li>
    ...
    inserts from transformation above go here (the amount of li-items varies)
    ...
    <li>last item is also hard coded</li>
</ul>

Answer 1

您可以删除最后一项并在添加动态内容后重新添加。

这是硬编码的：

<ul id="xmlMenuRight">
    <li>first item is hard coded</li>
    <li>last item is also hard coded</li>
</ul>

这是 JS：

var liElems = document.getElementById('xmlMenuRight').getElementsByTagName('li');
var lastChild = liElems[liElems.length-1];
document.getElementById('xmlMenuRight').removeChild(lastChild);

for (var i=0;i<inputList.length;i++) {
    // your code
    document.getElementById('xmlMenuRight').appendChild(x);
}

document.getElementById('xmlMenuRight').appendChild(lastChild);

注意：使用 lastChild 属性可能会很棘手，因为它可能会将空格视为

如何使用 Javascript 在列表 (ul) 中的现有项之间插入列表项 (li)

How to insert list items (li) between existing items in a list (ul) using Javascript

html

javascript

transformation