JSFiddle - React, Tailwind, and code Playground

by ChaseWest

HTML

<div id="info" class="template">
    <div>
       <ul>
           <li>{{name}}</li>
           <li>{{phone}}</li>
       </ul>
    </div>
</div>

CSS

.template{
    display: none;
}

JavaScript

var infoTemplate = document.querySelector("#info.template");

;(function(window, document, undefined){

    var regex = /{{(\w+)}}/g;
    
    function define(template, data, to){
        var frag = document.createDocumentFragment(),
            to = document.querySelector(to),
            el = template.children[0].cloneNode(true);
            
        
        el.innerHTML = el.innerHTML.replace(regex, function(){
            return data[arguments[1]];
        });
        
        to.appendChild( frag.appendChild(el) );      
    }
    
    var people = [
        {name: "Chase", phone: 1},
        {name: "Amanda", phone: 2},
        {name: "Lillian", phone: 3},
    ]
        
    for(var i = 0; i < people.length; i++){
       define(infoTemplate, people[i], "body"); 
    }
    
})(window, document);