Javascript 向从JS调用的div添加数据
我有一个简单的脚本im测试,它调用一个HTML文件。在该html文件中有一个id为“test2”的div 然后我尝试将内容添加到它的innerHTML中,但它的行为就像它不存在一样,即使div显示在浏览器中 这就是我处理这个想法的方式:Javascript 向从JS调用的div添加数据,javascript,Javascript,我有一个简单的脚本im测试,它调用一个HTML文件。在该html文件中有一个id为“test2”的div 然后我尝试将内容添加到它的innerHTML中,但它的行为就像它不存在一样,即使div显示在浏览器中 这就是我处理这个想法的方式: <script> function call_file(file,div_id){ var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Oper
<script>
function call_file(file,div_id){
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(div_id).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",file,true);
xmlhttp.send();
}
window.onload = function() {
file = 'test.html';
div_id = 'test';
call_file(file,div_id);
document.getElementById('test2').innerHTML = 'Hi';
};
</script>
<div id="test" class="outer""></div>
您无法设置它,因为它还不存在。你需要等到它被加载 您可以使用回调函数来实现这一点
function call_file(file,div_id, callback){
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(div_id).innerHTML=xmlhttp.responseText;
return callback();
}
}
xmlhttp.open("GET",file,true);
xmlhttp.send();
}
window.onload = function() {
file = 'test.html';
div_id = 'test';
call_file(file,div_id, function () {
document.getElementById('test2').innerHTML = 'Hi';
});
};
您正在进行异步调用,因此
send()
将在收到响应并将其添加到DOM之前返回。依赖于接收到的数据的任何代码都应该在onreadystatechange
函数中,或者以某种方式由其触发,以便在接收到响应数据之前不会执行该代码。try您也可以尝试将脚本放在div之后。这样,它只能在将div加载到DOM之后运行。另一种方法是在jQuery中使用$(document).ready()
函数。这只在加载所有DOM对象后才调用。不需要窗口onload来处理所有这些。嗯,我试图通过调用函数而不是像这样返回来使它更灵活:但问题仍然是我应该修改什么?我在另一个答案中尝试了这一点:所以一旦准备好它就会调用另一个函数=/但是在你的paste.to代码中第31行没有工作。我仍然在寻找一个可能还不存在的DOM元素。我可以在第31行添加什么来检查之前正确完成的函数呢?有很多可能的方法,对当前代码最简单的更改就是将其移到call_back()中嗯,这将限制该函数的选项,有没有方法返回真/假并使用if语句调用第31行?
Cannot set property 'innerHTML' of null
function call_file(file,div_id, callback){
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(div_id).innerHTML=xmlhttp.responseText;
return callback();
}
}
xmlhttp.open("GET",file,true);
xmlhttp.send();
}
window.onload = function() {
file = 'test.html';
div_id = 'test';
call_file(file,div_id, function () {
document.getElementById('test2').innerHTML = 'Hi';
});
};