Javascript 如何将div正确添加到现有div？

我正在创建一个页面，将数据库中的数据显示为

div

元素。在开始时，我想显示所有数据，如果用户在表单中键入了一些内容，则显示的数据将适合用户搜索结果

我正在使用

AJAX

技术

代码未按所需方式工作，因为屏幕上没有

div

。我认为这与

div

的声明有关，但我不确定我错在哪里

<script> 


    function getData1(search)
    {

        if(search=="")
        {

            var xmlhttp = new XMLHttpRequest();

             xmlhttp.onreadystatechange = function()
             {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                {
                    data = JSON.parse(xmlhttp.responseText);
                    fill1(data);

                }
            }; 

            xmlhttp.open("GET",'ex2.php?q=0', true);
            xmlhttp.send();

        }
        else
        {

            var xmlhttp = new XMLHttpRequest();

             xmlhttp.onreadystatechange = function()
             {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                {
                    data = JSON.parse(xmlhttp.responseText);
                    fill1(data);

                }
            }; 

            xmlhttp.open("GET",'ex2.php?q='+search, true);
            xmlhttp.send();



        }

    }

    function fill1(data)
    {

        parent = document.getElementById('contener');
        parent.innerHTML = "";


        for(i=0, len =data.length; i<len; i++)
        {


            var div = document.createElement('div');
            div.innerHTML = '<div class="tile" id='+data[i][0]+' onClick="detail(this.id)">


                                        +'<div class="date"><i class="icon-calendar"></i>'+data[i][3]+'</div>'
                                        +'<div class="features">'

                                            +'<div id="distance" class="sq">'

                                                +'<div class="img"><i class="icon-distance"></i></div>'
                                                +'<div class="description">'+data[i][1]+' km</div>'
                                                +'<div style="clear:both"></div>'

                                            +'</div>'
                                            +'<div id="time" class="sq">'

                                                +'<div class="img"><i class="icon-time"></i></div>'
                                                +'<div class="description">'+data[i][2]+'</div>'
                                                +'<div style="clear:both"></div>'

                                            +'</div>'
                                            +'<div id="velocity" class="sq">'

                                                +'<div class="img"><i class="icon-velocity"></i></div>'
                                                +'<div class="description">'+data[i][4]+' km/h</div>'
                                                +'<div style="clear:both"></div>'

                                            +'</div>'
                                            +'<div style="clear:both"></div>'

                                        +'</div>'

                                    +'</div>';


            parent.append(div);

        }


    }


    $('document').ready(getData1(""));

</script>

函数getData1（搜索）
{
如果（搜索==“”）
{
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
data=JSON.parse（xmlhttp.responseText）；
fill1（数据）；
}
}; 
open（“GET”，'ex2.php？q=0'，true）；
xmlhttp.send（）；
}
其他的
{
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
data=JSON.parse（xmlhttp.responseText）；
fill1（数据）；
}
}; 
open（“GET”，'ex2.php？q='+search，true）；
xmlhttp.send（）；
}
}
函数fill1（数据）
{
parent=document.getElementById（'contenner'）；
parent.innerHTML=“”；
对于（i=0，len=data.length；i为什么不使用

比较简单，
一个例子

$.ajax({
      url: "yourActionUrl",
      data: {name: value},
      type: "GET"
      }).success(function(result){
             $("#search").html(result);
      }

你为什么不使用

比较简单，
一个例子

$.ajax({
      url: "yourActionUrl",
      data: {name: value},
      type: "GET"
      }).success(function(result){
             $("#search").html(result);
      }

如果要使用jQuery，只需在这些行上执行操作即可-

//Loop this for all the data you receive
$("#container").append("<div class='..'>{Everything you need}</div>");

//对接收到的所有数据循环此操作
$（“#容器”）.append（“{您需要的一切}”）；

您确定您的AJAX正在返回数据吗？这可能也是一个问题。检查AJAX调用返回的数据，并在此处发布您得到的信息。
如果您要使用jQuery，只需在这些行上执行操作即可-

//Loop this for all the data you receive
$("#container").append("<div class='..'>{Everything you need}</div>");

//对接收到的所有数据循环此操作
$（“#容器”）.append（“{您需要的一切}”）；

您确定您的AJAX正在返回数据吗？这可能也是一个问题。请检查AJAX调用返回的数据，并将您得到的信息发布到此处。
第一件事。

div.innerHTML = '<div class="tile" id='+data[i][0]+' onClick="detail(this.id)">

您正在调用
onkeyup=“getData（this.value）”
上的
getData（）
函数，其中正如在
script标记中一样，您有一个名为
getData1（）
的函数。我想可能是输入错误

首先将此
onkeyup=“getData（this.value）”
更改为
onkeyup=“getData1（this.value）”

此外，在语句
$（'document'）中调用的函数没有
terminotor

$(document).ready(function() {
        getData1('');
});

 div.innerHTML = '<div class="tile" id='+data[i][0]+' onClick="detail(this.id)">'

最后，您缺少一个结尾
撇号

div.innerHTML = '<div class="tile" id='+data[i][0]+' onClick="detail(this.id)">

div.innerHTML='1！'

应该是

$(document).ready(function() {
        getData1('');
});

 div.innerHTML = '<div class="tile" id='+data[i][0]+' onClick="detail(this.id)">'

div.innerHTML=''

第一件事。

div.innerHTML = '<div class="tile" id='+data[i][0]+' onClick="detail(this.id)">

您正在调用
onkeyup=“getData（this.value）”
上的
getData（）
函数，其中正如在
script标记中一样，您有一个名为
getData1（）
的函数。我想可能是输入错误

首先将此
onkeyup=“getData（this.value）”
更改为
onkeyup=“getData1（this.value）”

此外，在语句
$（'document'）中调用的函数没有
terminotor

$(document).ready(function() {
        getData1('');
});

 div.innerHTML = '<div class="tile" id='+data[i][0]+' onClick="detail(this.id)">'

最后，您缺少一个结尾
撇号

div.innerHTML = '<div class="tile" id='+data[i][0]+' onClick="detail(this.id)">

div.innerHTML='1！'

应该是

$(document).ready(function() {
        getData1('');
});

 div.innerHTML = '<div class="tile" id='+data[i][0]+' onClick="detail(this.id)">'

div.innerHTML=''

这是
$（document）.ready（getData1）
这不是解决方案Deneo建议用document附加处理函数的正确方法。ready，你试过了吗？是的，它没有帮助Stringized html在添加组合元素时是个糟糕的主意。“动态”-如果对它进行修改，您将获得更好的结果。既然jquery似乎被使用，为什么不使用它的特性来附加项呢？它是
$（document）.ready（getData1）
这不是解决方案Deneo建议了正确的方法，可以将处理函数附加到document中。ready，您尝试过了吗？是的，它没有帮助Stringized html在添加组合元素时是一个糟糕的主意。“动态”-如果对它进行修改，您将获得更好的结果。既然jquery似乎被使用，为什么不使用它的功能来附加项？问题真的与AJAX声明有关吗？问题真的与AJAX声明有关吗？我纠正了这个错误，但程序仍然不起作用。div没有出现在“contenner”中div@W.Kurek，你能简单地在fill1（data）函数中编写一个console.log（“它在这里..！！”），以检查该函数是否被调用。然后还要编写console.log（len）要检查数据的长度，请检查“数据”中是否确实有任何数据，以便“for”循环正在运行。检查它，然后告诉我您在浏览器的控制台上看到了什么结果。您可以查看控制台是否有错误吗？可以在打开
浏览器时按
F10
键，然后单击
c在OLE选项卡上，请说明您遇到了什么错误。因为只有在ajax成功的情况下，DIV才会呈现。谢谢您，或者为了简单起见，在
data=JSON.parse（xmlhttp.responseText）之后添加这一行
console.log（data）

看看里面有什么。是的，我同意@Amkhan，如果你的Ajax调用没有返回成功响应，那么就不会添加div。所以检查你的控制台是否有错误。如果没有错误，那么检查console.log语句是否被打印。我纠正了这个错误，但程序仍然无法运行。