Dynamically create HTML marquee element using JavaScript

← PrevNext →

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 →