JSFiddle - React, Tailwind, and code Playground

by joepegler

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<ul id="result-one"></ul>
<br>
<ul id="result-two"></ul>

JavaScript

var cars = [
    {
        "id" : 1,
        "name":"volvo"
    },
    {
        "id" : 2,
        "name":"nissan"        
    },
    {
        "id" : 3,
        "name":"audi"        
    }
];
for (i=0;i<cars.length;i++){
    
    //Option one
    var html = "<li data-id="+cars[i].id+"><a>"+cars[i].name+"</a></li>";
    $('#result-one').append(html);
    
    //Option two    
    var $el = $('<li/>',{
        'data-id' : cars[i].id
    }).append(
        $('<a/>',{
            text : cars[i].name
        })
    );    
    $('#result-two').append($el);
}