jQuery函数自动关闭追加的div标签

Question

我有以下的函数：

function displayResults(Items) {
                $("#result").text("");
                $("#result").append('<div class="car-offers">');
                $("#result").append('<div class="purple"></div>');
                $("#result").append('<img src="images/caroffer.jpg" alt="" title="" width="213" height="117" />');
                $("#result").append('<h3>titleeee</h3>'); // ' + Items[i].Title + '
                $("#result").append('<span>Year: 2003</span>');
                $("#result").append('<span>Milage: 172,000 Km</span>');
                $("#result").append('<span class="price">53,000 QR</span>');
                $("#result").append('<a href="">Link</a>');
                $("#result").append('</div>');

                $("#result").append('<div class="car-offers">');
                $("#result").append('<div class="purple"></div>');
                $("#result").append('<img src="images/caroffer.jpg" alt="" title="" width="213" height="117" />');
                $("#result").append('<h3>titlee22</h3>'); // ' + Items[i].Title + '
                $("#result").append('<span>Year: 2003</span>');
                $("#result").append('<span>Milage: 172,000 Km</span>');
                $("#result").append('<span class="price">53,000 QR</span>');
                $("#result").append('<a href="">Link</a>');
                $("#result").append('</div>');
        }

我的问题是在运行时显示的HTML代码如下：<div class="car-offers"></div>，因此整个页面都混乱了。

- Alex

---

为什么不将其制作成一个字符串，然后附加该字符串呢？ - Deepanshu Goyal

除了这个问题之外：使用像Handlebars这样的js模板引擎会更加可读。 - adt

Answer 1

你不能使用.append()来追加不完整的HTML片段。与document.write不同，jQuery的.append()方法在将字符串附加到DOM之前解析传递的字符串为元素。

因此，当你执行以下操作时：

$("#result").append('<div class="car-offers">');

jQuery将给定的字符串解析为一个div元素，并将car-offers值赋给它的className属性，然后将新创建的元素添加到#result元素中。

以单个操作附加整个HTML字符串将修复此问题，因此jQuery知道如何正确解析给定的字符串。

---

个人建议不要在JS文件中放置大量HTML。您可以考虑将其放在display:none的

中，然后仅调用.show()。或者将其最初放在页面上，.detach() 存储在变量中，需要时再进行.append()操作。

- Fabrício Matté

Answer 2

您可以使用一个数组和join方法来解决这个问题。

function displayResults(Items) {
    $("#result").text("");
    var array = [];
    array.push('<div class="car-offers">');
    array.push('<div class="purple"></div>');
    array
            .push('<img src="images/caroffer.jpg" alt="" title="" width="213" height="117" />');
    array.push('<h3>titleeee</h3>'); // ' + Items[i].Title + '
    array.push('<span>Year: 2003</span>');
    array.push('<span>Milage: 172,000 Km</span>');
    array.push('<span class="price">53,000 QR</span>');
    array.push('<a href="">Link</a>');
    array.push('</div>');

    array.push('<div class="car-offers">');
    array.push('<div class="purple"></div>');
    array
            .push('<img src="images/caroffer.jpg" alt="" title="" width="213" height="117" />');
    array.push('<h3>titlee22</h3>'); // ' + Items[i].Title + '
    array.push('<span>Year: 2003</span>');
    array.push('<span>Milage: 172,000 Km</span>');
    array.push('<span class="price">53,000 QR</span>');
    array.push('<a href="">Link</a>');
    array.push('</div>');
    $("#result").text(array.join(''));
}

- Arun P Johny

Answer 3

我刚遇到了这个问题。一个解决方案是先在循环中创建div容器，然后根据需要填充它们：

for(var i = 0; i < 12; i++){

    $(el).append('<li class="scene-block"></li>'); // create container li tags

    //fill empty li tags with content
    for(var j = 0; j < 2; j++){
        $(el).find('li').last().append('<div class="select-a-scene-bg"></div>');
    }

}

- Nick Taras