I want to append items to a list from an array

Question

Here is my unordered list that I am trying to append additional list items to.

<ul id="subreddits">
   <li class="my-subs"><strong>MY SUBREDDITS</strong></li>
 </ul>

Here is the javascript. I tried two methods. I tried to map the array and also use a function. I get an error saying that it cant append to something null. The variables in the array all have values which equal to their names as strings.

 const subReddit = [home, "-", popular,"-", all, "-", random, "-", users]

function subredditList() {
 const unorderedList = document.getElementById("subreddits");
 for(let i = 0; i < subReddit.length; i++) {
    let item = document.createElement("li");
    item.innerHTML = subReddit[i];
    unorderedList.appendChild(item);
}
}

subReddit.map((sub, index) => {
 const unorderedList = document.getElementById("subreddits");
for(let i = 0; i < subReddit.length; i++) {
    let item = document.createElement("li");
    item.innerHTML = subReddit[i];
    unorderedList.appendChild(item);
}
})

Thanks in advance for the help. I really appreciate you all.

Can you post a [MCVE] that illustrates the error you're running into? Your code looks OK — CertainPerformance, Jan 04 '19 at 02:01
Uncaught TypeError: Cannot read property 'appendChild' of null — Jonathan V Britannia, Jan 04 '19 at 02:11
That's not a [MCVE]. Likely the problem is addressed in the linked canonical. — CertainPerformance, Jan 04 '19 at 02:13
I apologize I didnt click the link that explained it. You were right though, had I posted a better example I couldve found out that the issue was that I put my script tags at the top of my HTML file. That link helped me as well.Thank you — Jonathan V Britannia, Jan 04 '19 at 02:17

score 0 · Answer 1 · answered Jan 04 '19 at 02:03

In your subreddit list, you don't need to store the -.

You can print a list with join specifying the separator (as shown below).

Clean your list then cycle over it, create li elements, and append them to the container as below:

const subReddit = ['home', 'popular', 'all', 'random', 'users'];
console.log(subReddit.join('-'));

const container = document.querySelector('#subreddits');
subReddit.forEach(sub => {
  const item = document.createElement('li');
  item.innerHTML = sub;
  container.appendChild(item);
});

<ul id="subreddits">
  <li class="my-subs"><strong>MY SUBREDDITS</strong></li>
</ul>

Thanks. It didnt work because I put my script tag at the top of my HTML. But this is way cleaner code. Thank you!! This will help — Jonathan V Britannia, Jan 04 '19 at 02:18

I want to append items to a list from an array

1 Answers1