appendChild 不适用于特定文档 [重复]答案

【问题标题】：appendChild won't work on specific document [duplicate]appendChild 不适用于特定文档 [重复]
【发布时间】：2016-07-23 04:22:57
【问题描述】：

我正在尝试制作自定义下拉菜单，并且正在尝试不同的方法来做到这一点。但是，appendChild 突然停止工作。当我检查 chrome 控制台时，它在第 26 行给出了“Uncaught TypeError: Cannot read property 'appendChild' of null”的错误。我以前经常使用 appendChild，我从来没有遇到过这种问题.我什至打开了我之前制作的另一个文档，然后将几乎相同的行复制并粘贴到其中，并得到了同样的错误。帮忙？

<!doctype html>
<script>
function changeClassValue() {
    if(document.getElementById('dropDown').className == "up") {
            document.getElementById('dropDown').className = "down";
            numberValue = 1;
        } else if(document.getElementById('dropDown').className == "down") {
            document.getElementById('dropDown').className = "up";
            numberValue = 0;
        } else {

    }
changeTextVisibility();
}
function changeTextVisibility() {
    if(numberValue == 1) {
            newDiv.appendChild(newParagraph);
    } else if(numberValue == 0); {
            newDiv.appendChild(newParagraph);
 }
}
var numberValue;
var newDiv = document.createElement('div');
var newParagraph = document.createElement('p');
var newParagraphText = document.createTextNode('This is a drop down menu!');
document.body.appendChild(newDiv);
newParagraph.appendChild(newParagraphText); //this is line 26, and is what seems to be broken.
</script>
<style>

</style>

<body style="background-color: skyblue;">
<p id="dropDown" class="up" style="font-size: 25px; padding: 10px      10px;background-color: slategray; display: inline-block;"
onclick="changeClassValue();"><strong><u> >drop down menu< </u></strong></p>
</body>

【问题讨论】：

标签： javascript

【解决方案1】：

将 JavaScript 移动到正文的末尾。