Javascript 为数组中的每个项追加html内容

我正在开发一个插件，需要加载预设，并用这些数据填写表格。据我所知，在尝试编写尽可能短的代码时，我最终创建了一个“模板”变量，如下所示：

var Fields =  
    '<div class="Container">' +
    '<div class="Fields">' +
    '<input type="text" name="Title" placeholder="Title" />' +
    '<input type="text" name="Address" placeholder="Address" />' +
    '<input type="text" name="Latitude" placeholder="Latitude" />' +
    '<input type="text" name="Longitude" placeholder="Longitude" />' +
    '<input type="text" name="Description" placeholder="Description" />' +
    '<input type="text" name="URL" placeholder="URL" />' +
    '<div class="Image"></div>' +
    '</div>' +
    '</div>';

---

我为那些希望近距离查看结果的人创建了一个JSFIDLE，并为我提供了一些指导

apppend函数附加字段并返回数据附加到的元素，因此它最终会更改所有字段，包括旧字段。 将追加功能与数据更新分离：

var fields = $(Fields);
 $('.results').append(fields);
 fields
     .find('.Title').text(temp[0]).end()
     ...

---

看看这个

哦，天哪，你的一个笨蛋，我喜欢帮助笨蛋。单击JSFIDLE上的“协作”并评论链接，如果您愿意，我将一对一地帮助您。谢谢！

function preset() {
        var str = 'Stackoverflow&%1600 Penn&%10.2342342&%2.2532452&%Need help with this&%http://www.stackoverflow.com&%http://upload.wikimedia.org/wikipedia/commons/b/b2/Hausziege_04.jpg;Google&%Silicon Valley 1&%80.435234523&%14.0065592&%This is Google&%http://www.google.com&%http://resources.news.com.au/files/2012/01/13/1226243/386315-harp-seal-1.jpg;',
            arr = {},
            temp = {},
            Fields =  
'<div class="Container">' +
'<div class="Fields">' +
'<input type="text" name="Title" placeholder="Title" />' +
'<input type="text" name="Address" placeholder="Address" />' +
'<input type="text" name="Latitude" placeholder="Latitude" />' +
'<input type="text" name="Longitude" placeholder="Longitude" />' +
'<input type="text" name="Description" placeholder="Description" />' +
'<input type="text" name="URL" placeholder="URL" />' +
'<div class="Image"></div>' +
'</div>' +
'</div>';
        arr = str.split(";");
        $.each(arr,function(i,val){
            temp = arr[i].split("&%");
            if(temp.length >= 2) {
                if(temp[6] !== 'undefined') {
                    $('.results').append($(Fields))
                        .find('.Title').text(temp[0]).end()
                        .find('input[name="Title"]').val(temp[0]).end()
                        .find('input[name="Address"]').val(temp[1]).end()
                        .find('input[name="Latitude"]').val(temp[2]).end()
                        .find('input[name="Longitude"]').val(temp[3]).end()
                        .find('input[name="Description"]').val(temp[4]).end()
                        .find('input[name="URL"]').val(temp[5]).end()
                        .find('.Image')
                        .addClass('added-image')
                        .append('<img src="' + temp[6] + '" />').end();
                } else {
                    $('.results').append($(Fields))
                        .find('.Title').text(temp[0]).end()
                        .find('input[name="Title"]').val(temp[0]).end()
                        .find('input[name="Address"]').val(temp[1]).end()
                        .find('input[name="Latitude"]').val(temp[2]).end()
                        .find('input[name="Longitude"]').val(temp[3]).end()
                        .find('input[name="Description"]').val(temp[4]).end()
                        .find('input[name="URL"]').val(temp[5]).end();
                }
            } else {
                $('.results').append(Fields);
            }
        });
    } 

var fields = $(Fields);
 $('.results').append(fields);
 fields
     .find('.Title').text(temp[0]).end()
     ...