I have a marquee on my website:

<marquee>Hello! <span id="text">Wele 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">Wele to my website.</span>
</marquee>

I have a marquee on my website:

<marquee>Hello! <span id="text">Wele 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">Wele 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.

• javascript
• jquery
• html
• marquee

Share Improve this question Follow edited May 4, 2019 at 16:25 Cœur 38.8k2525 gold badges205205 silver badges277277 bronze badges asked Feb 9, 2016 at 7:33 ITChristianITChristian 11.3k1414 gold badges5353 silver badges9494 bronze badges 2

• imho -> What are arguments against the usage of a ticker / marquee on websites? – Andreas Commented Feb 9, 2016 at 7:37
• 2 @Andreas I just developed a HTML5 TV System. A TV channel is usually using a ticker. That's why I am asking the question. Moreover, I am in agree with your post. Thank you. – ITChristian Commented Feb 9, 2016 at 7:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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">Wele to my website.</span>
</marquee>
</div>

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">Wele to my website.</span>
</marquee>

I built a library to help with this:

Vanilla JS: https://github./tjenkinson/dynamic-marquee

React: https://github./tjenkinson/dynamic-marquee-react