insertAdjacentHTML 无法读取 null 的属性答案

【问题标题】：insertAdjacentHTML can't read property of nullinsertAdjacentHTML 无法读取 null 的属性
【发布时间】：2017-10-20 12:38:25
【问题描述】：

以下错误不断重复...我只是想解释一下这里有什么问题和一些提示

错误

script.js:20 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null
at renderHTML (script.js:20)
at XMLHttpRequest.ourRequest.onload (script.js:13)

javascript

var animalContainer=_('animal-info');
function _(id){

    return document.getElementById(id);

}

_('btn').addEventListener("click",function(){
    var ourRequest=new XMLHttpRequest();
ourRequest.open('GET','test.json');
    ourRequest.onload=function(){
        var ourData=JSON.parse(ourRequest.responseText);
        renderHTML(ourData);
        console.log(ourData[0]);
    };
ourRequest.send();
});

function renderHTML(data){
     animalContainer.insertAdjacentHTML('beforeend','testing 123');
}

index.php

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
</head>
<body>


    <button id ="btn">Submit</button>
<script type="text/javascript" src="script.js"></script>


<div id="animal-info"></div>
</body>
</html>

【问题讨论】：

将您的脚本标签放在body 的结束标签之前，或者改用加载事件。
成功了！非常感谢
将常见的内置函数（如 getElementById）与 _ 混为一谈会造成混淆，并且会阻止您正确/完全实现框架。您节省的几个字节不会使您的脚本运行得更快，但维护起来却很麻烦，尤其是对其他人而言。

标签： javascript json ajax

【解决方案1】：

您需要在 renderHTML() 函数中声明 animalContainer 变量，或将其作为参数传递。

【讨论】：