Tengo problemas para descubrir cómo agregar los valores de una matriz como .textContent de un div.
Lo que quiero que suceda es que si recibo una matriz (temas), quiero que el contenido de la matriz se establezca como .textContent de los elementos con class="tab".
Siento que este código es correcto, pero no parece estar funcionando. ¿Algunas 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>tabsTopics no se ha insertado en el DOM, por lo que document.querySelectorAll(".tab") no encontrará a sus elementos secundarios.
Deberías hacer
tabsTopics.querySelectorAll(".tab").forEach((el, i) => { el.textContent = topics[i]; });en cambio.
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>No puede consultar Selector/All mientras sus elementos aún están en la memoria, solo después de que se agreguen al DOM.
Aquí hay una sugerencia/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>El camino más corto...
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>