将 div 中的每个字母拆分为自己的跨度

Question

我有一个带有标题标签的 div。<div class="hero__title">   <h1 class="hero__title-txt">Page title</h1></div>我正在尝试获得所需的输出<div class="hero__title">   <h1 class="hero__title-txt">       <span>P</span>       <span>a</span>       <span>g</span>       <span>e</span>       <span>T</span>       <span>i</span>       <span>t</span>       <span>l</span>       <span>e</span>   </h1></div>这是为了使用一些 CSS 来设计一个很酷的动画。下次我会担心 Javascript 来分隔单词。span{     transition: 1s left ease;}span:nth-child(1){     transition-delay: 400ms;}span:nth-child(2){     transition-delay: 600ms;}span.word{     display:inline-block;     margin-right:10px;}这篇不错的 SO 文章是一个很好的指南，但正如其中一个响应中所指出的那样，它只有在发出最后一个跨度时才有效。有大量的 jQuery 选项，是的，但是在我没有 jQuery 的第一个项目中，我很想用原生脚本来做这件事。<div id="text">Hello, <span class="name">John</span></div>var text = document.getElementById("text");var msg = text.textContent;var name = document.getElementsByClassName("name")[0].textContent;// remove name from msgmsg = msg.substring(0,msg.length - name.length);// to char arraymsg = msg.split('');name = name.split('');text.innerHTML = "<span>" + msg.join("</span><span>") + "</span>";text.innerHTML += "<span class=\"name\">" + name.join("</span><span class=\"name\">") + "</span>";