我正在创建一个页面,它将数据库中的数据显示为 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>
最佳答案
第一要务。
您正在 onkeyup="getData(this.value)"
上调用 getData()
函数,而在 script 标记
中您有名为 getData1()
的函数。我想有一个错字。
First change this
onkeyup="getData(this.value)"
toonkeyup="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)">'
关于javascript - 如何正确地将 div 添加到现有的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38671948/