JSFiddle - React, Tailwind, and code Playground

by Chris

HTML

<div id="my-body"></div>

CSS

.style1,
.style2 {
    padding: 6px;
    margin: 6px;
    font-size: 2.0em;
}

.style1 {
    border: 1px solid red;
    color: red;
}

.style2 {
    border: 1px solid blue;
    color: blue;
}

JavaScript

function appendHtmlFromArray(container, arr, delay) {
    var currentIndex = 0,
    	interval = setInterval(function () {
            container.innerHTML += arr[currentIndex];
            currentIndex += 1;
            if (currentIndex >= arr.length) {
                clearInterval(interval);
            }
    	}, delay);
}

var myArray = [
    '<div class="style1">text to show with style 1</div>',
    '<div class="style2">text to show with style 2</div>',
    '<div class="style1">text to show with style 1</div>',
    '<div class="style2">text to show with style 2</div>',
    '<div class="style1">text to show with style 1</div>',
    '<div class="style1">text to show with style 1</div>',
    '<div class="style2">text to show with style 2</div>',
    '<div class="style2">text to show with style 2</div>'
],
    myBody = document.getElementById('my-body');

appendHtmlFromArray(myBody, myArray, 1000);