如何添加 element with a href attribut in multipleelement? [duplicate]

Posted 2021-04-04

这个问题在这里已有答案：

• JavaScript: for loop append element in several places 1回答

我有一个任务是在导航列表的“li”元素及其文本上创建链接。所以我必须添加一个带有href属性的锚元素，以及三个li元素，其中class =“navigation”。我尝试为此做一个代码，但是不正确的任何人都可以帮助我使它工作。

var a = document.createElement("a");
var li = document.getElementsByClassName("navigation");
for (i = 0; i < a.length; i++) {
a.setAttribute("href", "#html");
li.appendChild(a);
}

li class =“navigation” - 应该更改为 - li class =“navigation”a href =“＃HTML”，依此类推三个“li”元素。

答案

在你的代码中，a只被声明一次，当你改变setAttribute并将a追加到li时，a将引用相同的元素。

• 在for循环中移动a的声明。
• 使用li[i]而不是li，因为li不是其HTMLCollection的元素。

还要向a添加一些innerHTML，以便查看它是否存在。并且避免声明隐式全局变量。使用let和i。

var li = document.getElementsByClassName("navigation");
for (let i = 0; i < li.length; i++) {
   var a = document.createElement("a");
   a.setAttribute("href", "#html");
   a.innerHTML = 'link' + i
   li[i].appendChild(a);
}

我建议你使用querySelectorAll和forEach循环。

var li = document.querySelectorAll(".navigation");
li.forEach(x => {
  var a = document.createElement("a");
  a.setAttribute("href", "#html");
  a.innerHTML = 'link' + i
  x.appendChild(a);

})