Tengo este código para dividir mi texto en diferentes tramos y funciona perfectamente.
Pero tengo 2x textos con 2x clases:
<p class="MyClass1">FIRST TEXT</p> <p class="MyClass2">SEC TEXT</p>código:
const p = document.querySelector(".MyClass1"; let words = p.textContent.split(" "); words = words.map((word) => { let letters = word.split(""); letters = letters.map( (letter) => `<span class="word_inner">${letter}</span>` ); return letters.join(""); }); words = words.map((word) => `<span class="word">${word}</span>`); p.innerHTML = words.join(" ");¿Cómo puedo agregar una segunda clase en este código?
Usa una function . Hace que el código sea reutilizable.
function createSpans(myClass) { const p = document.querySelector(myClass); let words = p.textContent.split(" "); words = words.map((word) => { let letters = word.split(""); letters = letters.map( (letter) => `<span class="word_inner">${letter}</span>` ); return letters.join(""); }); words = words.map((word) => `<span class="word">${word}</span>`); p.innerHTML = words.join(" "); } createSpans(".MyClass1"); createSpans(".MyClass2"); <p class="MyClass1">FIRST TEXT</p> <p class="MyClass2">SEC TEXT</p>