Andreich1310,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hot{
display: flex;
color: #0000FF;
font-size: 24px;
margin-top: 25px;
}
.hot:before{
content: "[";
color: #FF0000;
font-size: 32px;
}
.hot:after{
content: "]";
color: #FF0000;
font-size: 32px;
}
</style>
</head>
<body>
<div class="test"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var arr = [0, 1, [20, 21, 22, 23], 3, [40, [410, 411], 42], 5],
parent = document.querySelector(".test"),
k = 0;
function fn(arr, parent, k) {
parent.classList.add("hot");
arr.forEach(function(el, i) {
k += 800;
if (typeof el == "object") window.setTimeout(function() {
var clone = parent.cloneNode();
parent.appendChild(clone);
if (arr.length > ++i) parent.appendChild(document.createTextNode(","));
fn(el, clone, 0)
}, k - 100);
else window.setTimeout(function() {
parent.appendChild(document.createTextNode(el));
if (arr.length > ++i) parent.appendChild(document.createTextNode(","))
}, k)
})
}
fn(arr, parent, k)
});
</script>
</body>
</html>