ajax响应后HTML结构受到干扰答案

【问题标题】：HTML structure disturbed after ajax responseajax响应后HTML结构受到干扰
【发布时间】：2013-04-03 07:42:07
【问题描述】：

我正在使用 django 1.5、python 2.7 和 jquery 1.9。虽然这个问题主要与 javascript 有关。

我的html代码如下。这形成了一个对象列表，例如：

<div class="item cls">
<div class="item cls">
<div class="item cls">
<div class="item cls">
<div class="item cls">
<div class="item cls">
<div class="item cls">
<div class="item cls">

现在，当我通过 ajax 获取更多数据时，形成的结构是这样的：

<div class="item cls">
<div class="item cls">
<div class="item cls">
<div class="item cls">
    <div class="item cls"> #new div
        <div class="item cls"> #new div
                <div class="item cls"> #new div
                        <div class="item cls"> #new div

HTML：

{% for obj in objs %}        
        <div class="item cls">
            <div class="alpha"><a href="#"><img src="{{ STATIC_URL }}img/107.png" /></a></div>
            <div class="span6" id="abc_{{ obj.id }}">
            <h2 class="Title"><a href="#">{{ obj.t }}</a></h2>
            <p>{{ obj.a }}</p>

            <div class="tags">
            <a href="#"><i class="icon"></i> Intel</a>
            <a href="#"><i class="icon"></i> Architecture</a>
            </div>

           <a href="#" class="btn"><i class="icon"></i> Upload </a>
           <a href="#" class="btn"><i class="icon"></i> Download </a>
          </div>
        </div>
{% endfor %}

AJAX 成功：

for(var i = 0; i < response.length; i++){
    var divs = document.getElementsByClassName('item');
    divs[parseInt(divs.length)-1].innerHTML = '<div class="item cls"><div class="alpha"><a href="#"><img src="{{ STATIC_URL }}img/107.png" /></a></div><div class="span6" id="abc_' + response[i].id + '"><h2 class="Title"><a href="#">' + response[i].t + '</a></h2><p>' + response[i].a + '</p><div class="tags"><a href="#"><i class="icon"></i> Intel</a><a href="#"><i class="icon"></i> Architecture</a></div><a href="#" class="btn"><i class="icon"></i> Upload </a><a href="#" class="btn"><i class="icon"></i> Download </a></div></div>'

我在 innerHTML 中附加代码的那一行存在一些问题。不明白那是什么。请帮忙！！！

【问题讨论】：

您可能在某处遗漏了</div>。而不是做一个单行标记，你可以解析它一次，将它存储在一个 jQuery 对象中，然后克隆它并设置从你的 ajax 请求中获得的值。
你能更精确一点吗？我试图将我的 for 循环放在一个带有 itemContainer 类的 div 中。 innerHTML 仍然是个问题
能否给我们准确的 HTML 生成代码（不仅仅是主 div），以便我们有更多线索来搜索问题源
问题来源是innerHTML，我已经简化了很多查询。

标签： javascript jquery python-2.7 django-1.5

【解决方案1】：

我通过在我的 django 模板之外添加一个 div 来解决这个问题

<div class="itemContainer">
        #previous HTML code
</div>

现在在我写的ajax成功函数中

for(var i = 0; i < response.length; i++){
    var divs = $('.itemContainer')[0].innerHTML;
    $('.itemContainer')[0].innerHTML = divs.concat('//structure to concatenate');
}

我对这种方法不满意，但仍然对我有用。任何更好的答案/修复将不胜感激。

【讨论】：

【解决方案2】：

您将 ajax 响应“插入”到最后一个 div 中。这就是您的结构被冲洗的原因。由于您使用的是 jQuery，因此请利用“.insertAfter”方法。例如：

var div = jQuery('<div/>', {
    html: '<innerhtmlhere>'
});
div.insertAfter($('.item').last());

试一试，让我知道你的结果。

或者为了更快的实现：（如果您的响应文本是干净的）

$("<responsetexthere>").insertAfter($('.item').last());

文档：http://api.jquery.com/jQuery/#jQuery2

【讨论】：