title: Marquee, change content dynamically and restart scrolling
body: <p>I have a <code>marquee</code> on my website:</p>
  
  <pre><code>&lt;marquee&gt;Hello! &lt;span id="text"&gt;Welcome to my website.&lt;/span&gt;&lt;/marquee&gt;
  </code></pre>
  
  <p>I want to change dynamically the content of the span with <code>id="text"</code> from <code>marquee</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>setTimeout(function() {
    document.getElementById("text").innerHTML = "This is my website. Happy reading!";
  }, 5000);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;marquee&gt;Hello! &lt;span id="text"&gt;Welcome to my website.&lt;/span&gt;
  &lt;/marquee&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>
  
  <p>So, I want to restart the marquee scroll from beginning.</p>