Question about string rotation

Question about string rotation
0
#1

So i found this exercise on W3Sources about string rotation, i checked out the solution because i wasnt sure what they meant about rotating it. Now i read trought the code and did code along, i understand the way it works thanks to console.log, but one thing i dont get is. Why do we need to use in interval textNode .data = text? Now i understand that textNote.data gets data from element.childNodes[0] in already defined var of textNode that stores is but why doesnt it work if we just use text = text[text.length - 1] + text.substring(0, text.length - 1); alone in interval function? Why is it required to use textNode.data = text? When we already have textNode.data in var text?
HTML:

<body onload="animate_string('target')">
<pre id="target">W3Sources</pre>

JS:

function animate_string(id) {
    var element = document.getElementById(id);
    console.log(element);
    var textNode = element.childNodes[0];
    console.log(textNode);
    var text = textNode.data;
    console.log(text);

    setInterval(function () {
        text = text[text.length - 1] + text.substring(0, text.length - 1);
        textNode.data = text;
    }, 1000)
}
#2

Because you need to apply the changes to the node. If you don’t do textNode.data = text you’re only assigning the modified string to the text variable, which is never returned.

If this helps making the logic clear, you can also do:

textNode.data = text[text.length - 1] + text.substring(0, text.length - 1);