我试图创建一个列表并使用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>
null
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>
您不在标记内添加任何文本，因此它的大小为0，0并且不可见
null
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>
创建文本节点并追加到锚标记
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);
}
}
