Im trying to add a span element for each word in a div's text, that conteins a certain class, using Js. But, with my code, its only returning words. What is wrong?

$(function() {
    var title = $(".js-split-text").text();
    var titleText = title.split(" ");
    var newTitle = [];
    var letterCount = 0;
    titleText.forEach(function(el) {
            var titleElement = "<span>"   el   "</span>";
            newTitle.push(titleElement);
            letterCount  ;
            if (titleText.length === letterCount) {
                var newTitleText = newTitle.join(" ");
                $(".js-split-text")
                    .html(newTitleText)
                    .css({ opacity: 1 });

                var aniTime = 0;
                var offset = 500;
                $(".js-split-text span").each(function() {
                    var currentSpan = $(this);
                    aniTime  = offset;
                    setTimeout(function() {
                        currentSpan.addClass("animate");
                    }, aniTime);
                });
            }
        });
    });

CodePudding user response：

You're are wrapping the spans around the words in the text with this code

var titleElement = "<span>" el "</span>";

If you want to wrap the spans around the letters, you should further split the words into letters like so

var titleElement = "<span>" el.split('').join("</span><span>") "</span>";