Javascript ajax响应后HTML结构受到干扰

我使用的是Django1.5、Python2.7和jQuery1.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 %}

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>'

{%for obj in objs%}
{{obj.a}}

{%endfor%}

AJAX成功：

{% 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 %}

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>'

for（变量i=0；i'

---

我在innerHTML中添加代码的那一行出现了一些问题。我不明白那是什么。请帮助！！！

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

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

#以前的HTML代码

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

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

for（变量i=0；i

---

我对Methodody不满意，但仍然适用于我。如果有更好的答案/修复方法，我们将不胜感激。

您正在将ajax响应“插入”到“最后一个div”。这就是您的结构被隐藏的原因。因为您正在使用jQuery，请利用“.insertAfter”方法。例如：

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

var div=jQuery（“”{
html:'
});
div.insertAfter（$（'.item'）.last（））；

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

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

$（“”）.insertAfter（$（'.item'）.last（））；

---

文档：

您可能在某个地方丢失了一个

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