<!DOCTYPE html>
<html>
<head>
  <style>
    .multicol-wrapper>* {
      font: 20px/1 Ahem, sans-serif;
    }
    div.multicol-wrapper {
      border: thin solid black;
      display: inline-block;
      margin: 1em auto;
      width: 360px;
    }
    .multicol-basic-ref {
      background: yellow;
      width: 360px;
    }
    .multicol-count-ref {
      column-count: 3;
      column-gap: 0;
      column-rule: none;
    } 
    .multicol-columns-ref {
      columns: 3;
      column-gap: 0;
      column-rule: thin solid green;
    }
    .multicol-rule-ref {
      column-count: 3;
      column-gap: 0;
      column-rule-width: thin;
      column-rule-style: solid;
      column-rule-color: green;
    }
    .multicol-fill-balance-ref {
      columns: 3;
      column-gap: 0;
      column-rule: none;
      column-fill: balance;
      height: 6em;
    }
    .multicol-fill-auto-ref {
      column-count: 3;
      column-gap: 0;
      column-fill: auto;
      height: 6em;
    }
    .multicol-progression-reverse-ref {
      column-count: 3;
      column-gap: 0;
      column-rule: none;
      column-progression: reverse;
    }
    .multicol-basic-ref-item {
      background: #000;
    }
    .item-1 {
      background: purple;
      color: purple;
    }
    .item-2 {
      background: orange;
      color: orange;
    }
    .item-3 {
      background: blue;
      color: blue;
    }
  </style>
  <script>
    function appendText() {
      var arrayWrapper = [
          "multicol-basic-ref multicol-count-ref",
          "multicol-basic-ref multicol-columns-ref",
          "multicol-basic-ref multicol-rule-ref",
          "multicol-basic-ref multicol-fill-balance-ref",
          "multicol-basic-ref multicol-fill-auto-ref",
          "multicol-basic-ref multicol-progression-reverse-ref"
      ];
      
      var  arrayMulticol = [
          "multicol-basic-ref-item item-1",
          "multicol-basic-ref-item item-2",
          "multicol-basic-ref-item item-3",
      ];
      
      var text = "XXXX XXXX XXXX XXXX XXXX XXXX XXXX";
     
      for (i = 0; i <  arrayWrapper.length; ++i) {
        var divWrapper = document.createElement("DIV");
        divWrapper.className = "multicol-wrapper";
        document.body.appendChild(divWrapper); 

        var divMulticol = document.createElement("DIV");
        divMulticol.className =  arrayWrapper[i];
        divWrapper.appendChild(divMulticol);
        
        for (j = 0; j < arrayMulticol.length; ++j) {
            var spanNode = document.createElement("SPAN");
            spanNode.className = arrayMulticol[j];
            divMulticol.appendChild(spanNode);
            
            var textNode = document.createTextNode(text);
            spanNode.appendChild(textNode);
        }
        
        var brNode = document.createElement("BR");
        document.body.appendChild(brNode); 
      }
    }
  </script>
</head>
<body onload="appendText()">
</body>
</html>