私の意見では、生の HTML をいじることは災害のレシピです。

問題が発生しにくい別のオプションは、代わりに jQuery オブジェクトを作成することです。

var ddl = $("<select>").attr("id", "testSelect");
for (var i=0; i<widgetareas.length; i++) {
    ddl.append($("<option>").prop("value", widgetareas[i]).text(widgetareas[i]));
}

$(target).append(ddl);​

ライブ テスト ケース。

次の行を置き換えてみてください。

output += '>'+widgetareas[i];

これについて：

output += '>'+widgetareas[i];

>別のタグ内のその終了タグを解析するときにブラウザーが混乱するため、文字には同等のエンティティを使用することをお勧めします>。

このようにしてみてください

output = '';
output += '<select id="testSelect">';
for (var i=0; i<widgetareas.length; i++) {
    output += '<option id="MyId" value="'+widgetareas[i]+'">';
    output +=  widgetareas[i];       
    output += '</option>';   
}
output += '</select>';

$(target).append(output);