javascript - 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>所以所有的页面都乱七八糟

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。您可以考虑将其放入 div 中并使用 display:none 然后简单地调用 .show() 即可。或者将其最初放在页面中，.detach()它存储在一个变量和.append()必要时返回。