javascript - H1 html tagging does not seems to have spaces

Question

I'm a newbie in HTML and I'm trying out some simple animation. With the help of tutorial, I'm able to do some simple animation however somehow my h1 class text does not seems to have spacing despite putting spaces. Based on w3school code editor, simply by adding spaces in the h1 class is sufficient when trying to make spaces between words.

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_class

const text = document.querySelector(".hello");
const strText = text.textContent;
const splitText = strText.split(" ");

text.textContent = "";

for (let i = 0; i < splitText.length; i++) {
  text.innerHTML += "<span>" + splitText[i] + "</span>";
}

let char = 0;
let timer = setInterval(onTick, 50);

function onTick() {
  const span = text.querySelectorAll('span')[char];
  span.classList.add('fade');
  char++;
  if (char === splitText.length) {
    complete();
    return;
  }
}

function complete() {
  clearInterval(timer);
  timer = null;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: black;
}

h1 {
  color: white;
  font-size: 4rem;
  font-family: sans-serif;
}

span {
  opacity: 0;
  transition: all 1s ease;
  transform: translateY(50px);
  display: inline-block;
}

span.fade {
  opacity: 1;
  color: red;
  transform: translateY(0px);
}

<h1 class="hello">Testing 1 2 3</h1>

question from:https://stackoverflow.com/questions/66066959/h1-html-tagging-does-not-seems-to-have-spaces

Answer 1

Your code searches a string for spaces to split on with strText.split(" ");. The spaces are then lost. To restore them, add them back when you reconstitute your string with the added spans with text.innerHTML += "<span>" + splitText[i] + "</span> "; or text.innerHTML += "<span>" + splitText[i] + "</span>&nbsp;";

const text = document.querySelector(".hello");
const strText = text.textContent;
const splitText = strText.split(" ");

text.textContent = "";

for (let i = 0; i < splitText.length; i++) {
  text.innerHTML += "<span>" + splitText[i] + "</span> ";
}

let char = 0;
let timer = setInterval(onTick, 50);

function onTick() {
  const span = text.querySelectorAll('span')[char];
  span.classList.add('fade');
  char++;
  if (char === splitText.length) {
    complete();
    return;
  }
}

function complete() {
  clearInterval(timer);
  timer = null;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: black;
}

h1 {
  color: white;
  font-size: 4rem;
  font-family: sans-serif;
}

span {
  opacity: 0;
  transition: all 1s ease;
  transform: translateY(50px);
  display: inline-block;
}

span.fade {
  opacity: 1;
  color: red;
  transform: translateY(0px);
}

<h1 class="hello">Testing 1 2 3</h1>