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

Question

我尝试创建一个创建动态菜单的函数。我已经能够创建“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 的建议将不胜感激。并且对语法的任何解释也将不胜感激。

谢谢!

Answer 1

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);
}

• 使用querySelector 而不是getElementById。两者都有效，但 querySelector 的性能得到了提升。该 API 接近 jQuery，并且大多数(如果不是全部)较新的浏览器都支持 querySelector。

• 出于性能原因，请在再次添加元素后附加 ul。

• 使用 LI 来保存链接元素，第二个 UL 不会执行您想要的操作。

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