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

我创建的页面显示数据库中的数据为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>

HTML部分

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

    <form> 

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

    </form> 

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

来源

2016-07-30 W.Kurek

这是'$（文件）。就绪（getData1）' – adeneo

它不是解决 –

adeneo是在暗示正确的，你可以将处理函数与文档的方式。准备好了，你试过了吗？ – Deep

第一件事第一件事。

你在哪里onkeyup="getData(this.value)"在script tag您有一个名为getData1()函数调用getData()功能。我猜想有一个错字。

首先改变这种onkeyup="getData(this.value)"到 onkeyup="getData1(this.value)"

此外，要调用没有在声明中$('document').ready(getData1(""));terminotor的功能应该是

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

最后，你缺少一个结局apostrophe

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

来源

2016-07-30 09:09:23

我纠正了这个错误，但程序仍然不起作用。 div并没有出现在'contener'div –

@ W.Kurek中，你可以简单地在你的fill1（data）函数中写一个console.log（“It's here .. !!”）来检查函数是否被调用或不。然后再用console.log（len）来检查数据的长度，'data'中是否有实际的数据，以便'for'循环运行或不运行。检查它，然后告诉我你的浏览器在控制台上看到了什么结果。 –

你能看到控制台的错误吗？在浏览器上按F10键即可完成。然后点击'console tab'。并请说明你得到了什么错误。因为div只会在你的ajax成功时渲染。谢谢 –

你为什么不使用http://api.jquery.com/jquery.ajax

它更简单，一个例子

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

来源

2016-07-30 08:36:21

这个问题真的与AJAX声明有关吗？ –

如果你使用jQuery，您可以简单地在这些方面做点什么 -

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

你确定你的AJAX正在返回数据吗？这也可能是一个问题。检查AJAX调用返回的数据并发布您在这里获得的内容。

来源

2016-07-30 08:48:56 Zeokav

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

回答

相关问题