Problem in a function : appendchild is not a function - appendchild

Question

I want to make animation on a text, and need to have each letter separated.
This works :
let hero = document.querySelector('.hero');
let text = hero.textContent;
hero.textContent = '';
let letters = text.split('');
letters.forEach((letter) => {
let newSpan = document.createElement('span');
let newContent = document.createTextNode(letter);
newSpan.appendChild(newContent);
if (newSpan.textContent == ' ') {
newSpan.style.marginRight = '5px';
newSpan.style.marginLeft = '5px';
}
hero.appendChild(newSpan);
});
<div class="hero">My awesome sentence</div>
But I would like to use this in another context, so to turn it into a function.
This dosesn't works, message : sentenceDiv.appendChild is not a function
let spanifyText = (sentenceDiv) => {
let text = sentenceDiv.textContent;
sentenceDiv = '';
let letters = text.split('');
letters.forEach((letter) => {
let newSpan = document.createElement('span');
let newContent = document.createTextNode(letter);
newSpan.appendChild(newContent);
if (newSpan.textContent == ' ') {
newSpan.style.marginRight = '5px';
newSpan.style.marginLeft = '5px';
}
sentenceDiv.appendChild(newSpan);
});
};
let hero = document.querySelector('.hero');
spanifyText(hero);
<div class="hero">My awesome sentence</div>
It is certainly a newbie problem but cannot figure it out.
Any help please ?
Thanks in advance

Answer 1

Thanks for pointing out the problem !
Just modified html by adding a span with a class for the original text, then removing it at the end of the function. Code can certainly be improved but it does the job !
let spanifyText = (sentenceDiv) => {
let originalSpan = sentenceDiv.querySelector('.original-span');
let text = sentenceDiv.textContent;
let letters = text.split('');
letters.forEach((letter) => {
let newSpan = document.createElement('span');
let newContent = document.createTextNode(letter);
newSpan.appendChild(newContent);
if (newSpan.textContent == ' ') {
newSpan.style.marginRight = '5px';
newSpan.style.marginLeft = '5px';
}
sentenceDiv.appendChild(newSpan);
});
originalSpan.parentNode.removeChild(originalSpan);
};
let hero = document.querySelector('.hero');
spanifyText(hero);
<div class="hero"><span class="original-span">My Awesome Text</span></div>