Dynamically create HTML marquee element using JavaScript

The <marquee> tag or the marquee element is used to create scrollable texts or images on a web page. I got a query recently from a user and based on that I am sharing this post explaining how to create and add the HTML marquee element dynamically using JavaScript.

Please note that the <marquee> tag has been deprecated. I do not recommend using this tag. Instead, you can use CSS to scroll or animate texts and images.

Attributes

First lets go through the element’s attributes. Since, I’ll be adding few attributes dynamically.

Table created using HTML Table Generator

Attribute	Description
behavior	Determines how the text or image will scroll within the marquee. Its values can be slide, scroll and alternate. Default value is scroll.
bgcolor	use this attribute to set the background colour of the marquee. The colour value can be a name (like red) or a Hexadecimal value (like #FF0000).
direction	Determines the direction texts or images will scroll within the marquee. The values can be left, right, up and down. The default is left, that is, the text will scroll from right to left.
height	use this attribute to set the height of the marquee container.
hspace	use this attribute to set the horizontal margin.
loop	Determines how many times the marquee will scroll. You can set a limit. For example, loop="2" will result in the marquee scrolling at a given direction just twice (2 times). Default is continues or infinite.
scrollamount	Use this to specify how fast should the marquee scroll. The value is in pixels. This is important, as many web developers struggle to figure out how to set the value dynamically. No worries. See the below example.
scrolldelay	use this to set the interval (or time in milliseconds) to delay each scroll or movement of the texts or images.
vspace	set the vertical margin of the marquee.
width	use this attribute to set the width of the marquee.

See all in action

Create and Add Marquee using JavaScript

In the markup section, just add a <div> element as container. Or, you can create a <div> element dynamically and then add the dynamic marquee to it.

The script

<!--the container-->
<div id='container'></div>

<script>
    //   dynamically create and add marquee tag
    const marquee_attributes = (ele) => {
      ele.direction = 'right';
      ele.width = '100%';
      ele.height = '100';
      ele.behavior = 'alternate';

      ele.setAttribute('scrollamount', '10');    // set the scrollamount.
      ele.setAttribute('style', 'color: red; font-family: Calibri;');   // set text color and font.
  
      //   We have created the marquee now add some text to it to make the element visible.
      ele.innerHTML = 'Dynamically created marquee';   // Assign text to the marquee
  
      let div = document.getElementById('container');
      div.appendChild(ele);
    }

    //   create marquee element.
    const create_marquee = () => {
      let el = document.createElement('marquee');
      marquee_attributes (el);
    }

    create_marquee();
</script>

Try it

Also, see other attributes in action.

• <marquee> element with scrollamount, height and width.

<marquee height='40' width='50%' scrollamount='20'>
    This is a sample text ...
</marquee>

Output

text inside a marquee tag

• <marquee> tag with direction attribute. (using an image)

<!--   default direction is left, which is right to left. -->
<marquee width='20%' direction='up'>
    <img src='https://www.encodedna.com/images/theme/javascript.png' alt='' />
</marquee>

Output

• Nested marquee – You can nest a marquee inside another marquee.

<!-- nested marquee -->
<marquee height='100px' width='200' behavior='alternate' direction='up'>
    <marquee behavior='alternate' style='border:none;'>
        Nested marquee
    </marquee>
</marquee>

nested marquee

Style a marquee element using CSS

You can style a marquee element, either inline or defining style within the <style> tag. For example,

<style>
  /* style the marquee tag using CSS */
  marquee {
    border: solid 1px orange;
    margin: 3px;
  }
</style>

<marquee height='80' direction='down'>scroll down</marquee>
<marquee height='80' direction='up'>scroll down</marquee>

Output

scrolling down scrolling up

See all in action

← PreviousNext →