如何用for循环在Chrome扩展中创建多个HTML超链接？

你现在的问题出在只创建了一个<a>元素，循环里每次只是修改这个元素的文本、href和id，然后重复把它添加到文档中。DOM元素是引用类型，同一个元素重复添加到DOM里只会移动它的位置，不会复制，所以最后只会留下一个链接——文本是所有URL拼接的结果，href是最后一次循环设置的URL。

function createDropDown() {
  const tree = document.createDocumentFragment();
  // 把<a>元素的创建放到循环内部，每次循环生成新的链接
  for(let index = 0; index < urlList.length; index++){
    const link = document.createElement('a');
    link.appendChild(document.createTextNode(urlList[index]));
    link.setAttribute("href", urlList[index]);
    link.setAttribute("id", "link " + index);
    // 可选：添加换行元素，让链接分开显示
    tree.appendChild(link);
    tree.appendChild(document.createElement('br'));
  }
  // 所有链接创建完成后，一次性插入目标div，减少DOM操作
  document.getElementById("hyperlinks").appendChild(tree);
}

• 原代码缺少循环和函数的闭合}，修复时已补上
• 用文档片段批量处理元素后再插入DOM，比每次循环都操作DOM性能更优
• 若不想用<br>分隔，也可以通过CSS给链接设置display: block;，让每个链接单独占一行

内容的提问来源于stack exchange，提问作者TheDisplayName