How to add text to Marquee element dynamically in JavaScript

javascript

← PrevNext →

Tools you can use

You can use innerHTML or innerText properties to add text or any content to a Marquee element using JavaScript.

Here’s an example.

The Markup
<style> 
    /*   style the marquee */
    marquee {
      border: solid 1px #999;
      margin: 3px;
      padding: 10px 0;
    }
</style>

<body>
  <marquee id='mq1'></marquee>
  <marquee id='mq2'></marquee>
</body>

I have defined two marquee elements with no texts or content in it. Now, let’s add some text to the elements.

The Script
<script>
  // using innerHTML property.
  let ele = document.getElementById('mq1');
  ele.innerHTML = 'Moonlighting - Working with 2 companies simultaneously';
  
  // using innerText property.
  let ele1 = document.getElementById('mq2');
  ele1.innerText = 'Sunlighting - Working for the same company for years and getting burnt out';
</script>
Try it

Do you know the difference between innerHTML and innerText properties? Please read this post if you don't. It is important.

And, there is another method.

<script>
  let elMQ = document.getElementsByTagName('marquee');
  elMQ[0].innerHTML = 'great deals...';
  elMQ[1].innerHTML = 'launching today';
</script>

Or you can create Marquee elements dynamically using JavaScript and add text and other attributes to the element dynamically.

Happy coding. ☺

← PreviousNext →