JSFiddle - React, Tailwind, and code Playground

by marcelow

HTML

<script type="jstemplate" id="listItem">
    <li class="item-<<id>>">First Name: <<firstName>>, Last Name: <<lastName>></li>
</script>
<script type="jstemplate" id="list">
    <ul id="list-<<id>>"><<content>></ul>
</script>

JavaScript

(function() {
    //data source
    var list = [
        {'firstName': 'Marcelo', 'lastName' : 'Waisman'},
        {'firstName': 'someone', 'lastName' : 'else'},
        {'firstName': 'another', 'lastName' : 'one'}
    ];
    
    // get templates
    var listTmplt = document.getElementById('list').innerHTML;
    var listItemTmplt = document.getElementById('listItem').innerHTML;
    
    // parse data source into templates
    var content= '';
    list.forEach(function(element, index){
        var firstName = element.firstName;
        var lastName = element.lastName
        content+=listItemTmplt.replace(/<<id>>/g, index)
            .replace(/<<firstName>>/g, firstName)
            .replace(/<<lastName>>/g, lastName);        
    });
    
    // append templates to body's HTML
    document.body.innerHTML += listTmplt.replace(/<<id>>/g, 0)
        .replace(/<<content>>/g, content);
})();