How to add values from an array as textContent with JavaScript

Question

I'm having trouble figuring out how to add the values from an array as .textContent of a div.

What I want to happen is if I receive an array (topics) I want the contents of the array to be set as the .textContent of the elements with class="tab".

I feel like this code is correct, but doesn't seem to be working. Any ideas?

const Tabs = (topics) => {
  const tabsTopics = document.createElement("div");
  const tabsOne = document.createElement("div");
  const tabsTwo = document.createElement("div");
  const tabsThree = document.createElement("div");

  tabsTopics.classList.add("topics");
  tabsOne.classList.add("tab");
  tabsTwo.classList.add("tab");
  tabsThree.classList.add("tab");

  tabsTopics.appendChild(tabsOne);
  tabsTopics.appendChild(tabsTwo);
  tabsTopics.appendChild(tabsThree);

  document.querySelectorAll(".tab").forEach((el, i) => {
      el.textContent = topics[i];
    });

  return tabsTopics;
}

const topics = ['1', '2', '3'];

document.getElementById('container').appendChild(Tabs(topics));

<div id="container"></div>

document.querySelectorAll(".tab") cannot work if you didn't .append() any .tab elements to the DOM. They aare still in-memory. You need to append them first, or manipulate while in memory. — Roko C. Buljan
– Roko C. Buljan, Commented Feb 11, 2022 at 21:10
I added a snippet and modified your code slightly to demonstrate. Feel free to revise further. — isherwood
– isherwood, Commented Feb 11, 2022 at 21:15

Gabriele Petrioli · Accepted Answer · 2022-02-11 21:07:23Z

tabsTopics has not been inserted in the DOM so the document.querySelectorAll(".tab") will not find its children.

You should do

tabsTopics.querySelectorAll(".tab").forEach((el, i) => {
  el.textContent = topics[i];
});

instead.

const Tabs = (topics) => {
  const tabsTopics = document.createElement("div");
  const tabsOne = document.createElement("div");
  const tabsTwo = document.createElement("div");
  const tabsThree = document.createElement("div");

  tabsTopics.classList.add("topics");
  tabsOne.classList.add("tab");
  tabsTwo.classList.add("tab");
  tabsThree.classList.add("tab");

  tabsTopics.appendChild(tabsOne);
  tabsTopics.appendChild(tabsTwo);
  tabsTopics.appendChild(tabsThree);

  tabsTopics.querySelectorAll(".tab").forEach((el, i) => {
      el.textContent = topics[i];
    });

  return tabsTopics;
}

const topics = ['1', '2', '3'];

document.getElementById('container').appendChild(Tabs(topics));

<div id="container"></div>

Mister Jojo · Accepted Answer · 2022-02-11 21:17:15Z

The shorter way...

const Tabs = (topics) =>
  {
  const tabsTopics = document.createElement('div')

  for (topic in topics)
    tabsTopics.appendChild(
       Object.assign(
          document.createElement('div')
          , { className:'tab', textContent: topic }
          )
       ); 
  return tabsTopics;
  }
const topics = ['1', '2', '3']

document.getElementById('container').appendChild(Tabs(topics));

.tab {
  color : blue;
  }

<div id="container"></div>

Roko C. Buljan · Accepted Answer · 2022-02-11 21:22:06Z

You cannot querySelector/All while your elements are still in-memory, only after they are appended to the DOM.
Here's a suggestion/remake:

// DOM utility functions:

const EL = (sel, par) => (par || document).querySelector(sel);
const ELNew = (tag, prop) => Object.assign(document.createElement(tag), prop);

// Task:  

const createTabs = (topics) => {

  // Create wrapper 
  const EL_topics = ELNew("div", {className: "topics"});
  
  // Iterate topics and create tabs
  topics.forEach(topic => {
    EL_topics.append(ELNew("div", {className: "tab", textContent:topic}));
  });
  
  // Append wrapper to container
  EL("#container").append(EL_topics);
};


createTabs(["1", "2", "3"]);

<div id="container"></div>

Collectives™ on Stack Overflow

How to add values from an array as textContent with JavaScript

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related