问如何使用CSS将JS对象转换为HTML和样式

EN

var data = { "users":[
            {
                "firstName":"Jack",
                "lastName":"Lewis",
                "startDate": {
                    "month":"January",
                    "day":12,
                    "year":2000
                }
            },
            {
                "firstName":"Raymond",
                "lastName":"Girard",
                "startDate": {
                    "month":"April",
                    "day":28,
                    "year":1994
                }
            },
            {
                "firstName":"Enrique",
                "lastName":"Sosa",
                "startDate": {
                    "month":"October",
                    "day":14,
                    "year":2004
                }
            }
    ]}

    var output="<ul>";
    for (var i in data.users) {
        output+="<li>" + data.users[i].firstName + " " + data.users[i].lastName + " &ndash; " + data.users[i].startDate.month + " " + data.users[i].startDate.day + ", " + data.users[i].startDate.year+ "</li>";
    }
    output+="</ul>";
  
    document.getElementById("writeTo").innerHTML=output;

@import url(http://fonts.googleapis.com/css?family=Roboto);
body {
    background: MediumTurquoise;
    font: normal 17px/1.8em Roboto, Helvetica, sans-serif;
}
div {
    box-shadow: 0 3px 5px darkcyan;
    background: gainsboro;
    border-radius: 5px;
    margin: 30px auto 0;
    max-width: 300px;
    max-height: 200px;
    padding:20px;
    
}
ul {
  margin: 0;
  padding: 0;
}
ul li {
    color: #555;
    list-style:none;
    
}
.firstName :first-child {
    font-weight:bold;
}

<div id="writeTo"></div>