为什么列表不显示在页面上答案

【问题标题】：Why list is not shown on page为什么列表不显示在页面上
【发布时间】：2020-08-12 22:06:21
【问题描述】：

我尝试创建一个列表并使用 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>

【问题讨论】：

标签： javascript html href

【解决方案1】：

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"]);

&lt;ul id="listing" style="font-size:120%;"&gt;&lt;/ul&gt;

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

【讨论】：

【解决方案2】：

您没有在 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>

【讨论】：

【解决方案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);
        }
      
    }

【讨论】：