Подстановка данных из JSON в HTML

С помощью Ajax-запроса приходят данные в формате JSON:

[
    "status": 1
    "city": [
        "москва", "санкт-петербург"
    ]
]

Вот таким образом я получаю данные от сервера:

$.ajax({
    type: "POST",
    url: ajaxurl,
    data: msg,
    success: function(html) {
        var res = JSON.parse(html);
        $('#cities h5').text("Города куда было продано оборудование:");
        $('#cities span').text(res.city);
    }
});

Вот сюда должен записываться список городов:

<div id="cities"></div>

Сейчас он в div записывается просто через запятую. А нужно, чтобы было в таком виде:

<div id="cities">
    <span> Город1 </span>
    <span> Город2 </span>
    <!-- и т.д -->
</div>

Обновление

Пояснение задачи. В общем начну издалека. Есть список оборудования. Например, ты выбираешь какую-то позицию, и показывается список городов, куда это оборудование отправили, в какой город, точнее. Реализовано это на аяксе, обрабатывается на стороне клиента, и выводится этот список через запятую, в каком-нибудь span, а мне нужно, чтоб каждый город был в отдельном span.