为什么列表没有显示在页面上

Question

我尝试创建一个列表并使用 js 动态地将 href 添加到我的 li，我在我的页面上看不到我的元素（只有当我使用 F12 时，我才能看到我的元素具有正确数据的元素），我错过了什么？这是我的代码： js:

 function createListOfFiles(names,hrefs) {
          
        let output = document.getElementById("listing");    //list elemenst
        for (let j = 0; names.length > j; j++) {
            var li = document.createElement('li');
            li.style.display = "inline";
            var ahref = document.createElement('a');
            ahref.setAttribute('href',hrefs[j]);
            ahref.setAttribute('textContent',names[j]);
            li.appendChild(ahref);
            output.appendChild(li);
        }
      
    }

html:

<ul id="listing"  style="list-style-type:none;background-color:blue;font-size:120%;"></ul>

Answer 1

您没有在 a 标签内添加任何文本，因此它的大小为 0,0 且不可见

const names = [1,2,3];
const hrefs = [1,2,3];

let output = document.getElementById("listing");    //list elemenst
for (let j = 0; names.length > j; j++) {
    var li = document.createElement('li');
    li.style.display = "inline";
    var ahref = document.createElement('a');
    ahref.setAttribute('href',hrefs[j]);
    ahref.setAttribute('textContent',names[j]);
    // ADD TEXT CONTENT
    ahref.innerText = names[j];
    li.appendChild(ahref);
    output.appendChild(li);
}

<ul id="listing" style="list-style-type:none;background-color:orange;font-size:120%;">
</ul>

Answer 2

function createListOfFiles(names, hrefs) {
    const output = document.getElementById("listing");
    for (let j = 0; names.length > j; j++) {
        const li = document.createElement('li');
        const ahref = document.createElement('a');
        li.style.display = "inline";
        ahref.setAttribute('href', hrefs[j]);
        ahref.innerText = names[j];
        li.appendChild(ahref);
        output.appendChild(li);
    }
      
}
createListOfFiles(["Google"], ["www.google.com"]);

<ul id="listing" style="font-size:120%;"></ul>

您的问题是 textContent 属性，您需要将 innerText 或 innerHTML 设置为那个 a 元素。

Answer 3

创建文本节点并附加到 anchor 标签

function createListOfFiles(names,hrefs) {
        
        let output = document.getElementById("listing");    //list elemenst
        for (let j = 0; names.length > j; j++) {
            var li = document.createElement('li');
            li.style.display = "inline";
            var ahref = document.createElement('a');
            ahref.setAttribute('href',hrefs[j]);
            //ahref.setAttribute('textContent',names[j]);
            var linkText = document.createTextNode(names[j]);// Create a new text node
            ahref.appendChild(linkText);
            li.appendChild(ahref);
            output.appendChild(li);
        }
      
    }

为什么列表没有显示在页面上

Why list is not shown on page

html

javascript

href