javascript - 如何正确地将 div 添加到现有的 div？

Question

我正在创建一个页面，它将数据库中的数据显示为 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>

HTML部分

<div id="contener"></div>
<div id="search">

    <form>

        <input type="text" onkeyup="getData(this.value)">

    </form>

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

Answer 1

第一要务。

您正在 onkeyup="getData(this.value)" 上调用 getData() 函数，而在 script 标记 中您有名为 getData1() 的函数。我想有一个错字。

First change this onkeyup="getData(this.value)" to onkeyup="getData1(this.value)"

此外，您在语句 $('document').ready(getData1("")); 中调用没有 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)">'

---