Question

前段时间我已经编写了一个转换，将数据从xml文件输出到html。它有效，但它是一个非常混乱的代码，因为我不经常编写Javascript，我无法弄清楚我是如何运行此代码的。

截至目前，此代码将li-items（每个包含一个链接）插入到一个空的ul-container中，其id =＆＃34; xmlMenuRight＆＃34;。

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

此转换中的所有li项应插入现有的第一个和最后一个项目之间。

我认为它将是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();
}

function getNodeValue（obj，tag）

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

每个项目的当前输出：

<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属性可能会很棘手，因为它可能会将空格视为＆lt; ul＆gt;的最后一个子节点。这就是我在我的例子中没有使用它的原因。

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

1 个答案: