选取框，动态更改内容并重新开始滚动

Question

I have a marquee on my website:

<marquee>Hello! <span id="text">Welcome to my website.</span></marquee>

I want to change dynamically the content of the span with id="text" from marquee :

 setTimeout(function() { document.getElementById("text").innerHTML = "This is my website. Happy reading!"; }, 5000); 

 <marquee>Hello! <span id="text">Welcome to my website.</span> </marquee> 

All works well. The problem is that I want to restart the marquee, from the beginning after changing the text. Imagine first text is a longer one, when changing with another, it will not be entirely readable at first scroll; the visitor will see it from middle.

So, I want to restart the marquee scroll from beginning.

Answer 1

Maybe not what you want or expect. But this should restart the marquee.
I would delete and reinsert the marquee in the DOM with a new element.

 setTimeout(function() { document.getElementById("marquee").innerHTML = '<marquee>Hello! <span id="text">This is my website. Happy reading!</span></marquee>'; }, 5000); 

 <div id="marquee"> <marquee>Hello! <span id="text">Welcome to my website.</span> </marquee> </div> 

Answer 2

Select your marquee and use .start() to restart it.

 setTimeout(function() { document.getElementById("text").innerHTML = "This is my website. Happy reading!"; document.getElementsByTagName("marquee")[0].start(); }, 5000); 

 <marquee>Hello! <span id="text">Welcome to my website.</span> </marquee>