使用Javascript将动态链接嵌套到动态列表中

debugcn 发表于 Dev

德鲁·阿克曼（Drew Ackerman）

我试图创建一个创建动态菜单的函数。我已经能够创建“ a”标签并为他们提供单独的链接，同时还为其分配ID。问题是我无法在CSS应用其规则的列表中获得链接。

function write_navBar() {
var links = ["intro.html", "art.html", "portfolio.html", "guides.html", "about_me.html"]
var ul = document.createElement("ul");
document.getElementById("mainNav").appendChild(ul);
for (i = 0 ; i < links.length ; i++) {
    var ul = document.createElement("ul");
    var a = document.createElement("a");
    var text = document.createTextNode(links[i]);

    a.href = links[i];
    a.id = "mainNav";
    a.text = links[i];

    document.getElementById("mainNav").appendChild(a);
                                    }
}

在保留javascript的同时清理代码的任何建议将不胜感激。并且还可以理解语法的任何解释。

谢谢！

米奇·康纳（Mitch Conner）

function write_navBar() {
  var links = ["intro.html", "art.html", "portfolio.html", "guides.html", "about_me.html"];
  var ul = document.createElement("ul");
  var li, a, text;
  for (var i = 0, l = links.length; i < l; ++i) {
    li = document.createElement('li');
    a  = document.createElement('a');
    text = document.createTextNode(links[i]);

    a.href = links[i];
    a.setAttribute("class", "some-class-name");
    a.appendChild(text);
    li.appendChild(a);
    ul.appendChild(li);

  }
  document.querySelector("#mainNav").appendChild(ul);
}

•在getElementById上使用querySelector。两者都可以，但是querySelector的性能有所提高。该API接近jQuery，并且大多数（如果不是全部）较新的浏览器都支持querySelector。

•由于性能原因，在再次添加元素之后追加ul。

•使用LI来固定链接元素，第二个UL不会做您想要的。

•不要重用id，您想要使用的是一个类，它们基本上做同样的事情，但是javascript对待id和类的方式有所不同。如果那不符合您的需求，请尝试在CSS中使用复合CSS选择器，例如：#mainNav ul li a { /* styles here */ }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。