关闭div的Jquery函数自行追加

我有以下function：

function displayResults(Items) { $("#result").text(""); $("#result").append('
'); $("#result").append('
'); $("#result").append(''); $("#result").append('
titleeee
'); // ' + Items[i].Title + ' $("#result").append('Year: 2003'); $("#result").append('Milage: 172,000 Km'); $("#result").append('53,000 QR'); $("#result").append('Link'); $("#result").append('
'); $("#result").append('
'); $("#result").append('
'); $("#result").append(''); $("#result").append('
titlee22
'); // ' + Items[i].Title + ' $("#result").append('Year: 2003'); $("#result").append('Milage: 172,000 Km'); $("#result").append('53,000 QR'); $("#result").append('Link'); $("#result").append('
'); } 

我的问题是，在运行时，html显示如下：

所以所有页面都搞砸了

Answer 1

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

所以当你这样做时：

 $("#result").append('
'); 

jQuery将给定的字符串解析为div元素，并将car-offers值分配给其className属性，然后将新创建的元素追加到#result元素。

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

---

就个人而言，我不建议将那么多HTML放在JS文件中。 您可以考虑使用display:none将其放在div ，然后只需在其上调用.show() 。 或者最初在页面中， .detach()它存储在一个变量中，而.append()则在必要时返回。

Answer 2

您可以使用带连接的数组来解决此问题

 function displayResults(Items) { $("#result").text(""); var array = []; array.push('
'); array.push('
'); array .push(''); array.push('
titleeee
'); // ' + Items[i].Title + ' array.push('Year: 2003'); array.push('Milage: 172,000 Km'); array.push('53,000 QR'); array.push('Link'); array.push('
'); array.push('
'); array.push('
'); array .push(''); array.push('
titlee22
'); // ' + Items[i].Title + ' array.push('Year: 2003'); array.push('Milage: 172,000 Km'); array.push('53,000 QR'); array.push('Link'); array.push('
'); $("#result").text(array.join('')); } 

Answer 3

这是我刚刚遇到的一个问题。 一个选项是首先在循环中创建div容器，然后根据需要填充它们：

 for(var i = 0; i < 12; i++){ $(el).append('
'); // create container li tags //fill empty li tags with content for(var j = 0; j < 2; j++){ $(el).find('li').last().append('
'); } }