CODEWITHSUNDEEP
javascripthtmlhref
Damkulul
Damkulul

Reputation: 1476

Why list is not shown on page

I try to create a list and adding href to my li dynamically using js , I can't see my elements on my page (Only when I use F12, I can see my elements with the right data), what am I missing? This is my code : 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>

Upvotes: 0

Views: 190

Answers (3)

Sajjad Ali
Sajjad Ali

Reputation: 304

Create a text node and append to anchor tag

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);
        }
      
    }

Upvotes: 0

Nicolae Maties
Nicolae Maties

Reputation: 2675

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>

Your problem was textContent attribute, you need to set the innerText or innerHTML to that a element.

Upvotes: 1

Helios
Helios

Reputation: 53

You dont add any text inside a tag, so it have size 0,0 and not visible

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>

Upvotes: 0

Related Questions