How to add values from an array as textContent with JavaScript-CodePudding

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 .

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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>