SOURCE

    var list = document.getElementById('list'),
        item,

        data = [
            {
                "title": "肖申克救赎",
                "area": "美国"
            },
            {
                "title": "流浪地球",
                "area": "中国"
            },
            {
                "title": "午夜凶铃",
                "area": "日本"
            },
        ];

        for(var i = 0; i < data.length; i++) {
            item = data[i];

            var li = document.createElement('li'),
                h3 = document.createElement('h3'),
                p = document.createElement('p');

            h3.innerHTML = '电影名称: <span class="title">' + item.title + '</span>';
            p.innerHTML = '地区: <span class="area">' + item.area + '</span>';

            li.appendChild(h3);
            li.appendChild(p);
            list.appendChild(li);
        }

<ul id="list"></ul>

.title {
    color:red;
}
.area {
    color: #666;
}