Question

我尝试创建跨度并将拆分字符串附加为每个范围内的字符。因此，根据下面的消息，它会像<span>t</span><span>h</span>等......

出于某种原因，我在附加到文档正文时收到此错误。为什么？

Uncaught TypeError: Cannot read property 'appendChild' of null

<!doctype html>
<html>
  <head>

    <script type="text/javascript">

            scramble();

            function scramble () {                  
                var message = "this is a message";
                for (var i = 0; i < message.split("").length; i++) {
                    var letter = document.createElement('span');
                    letter.innerHTML = message.split("")[i];
                    document.body.appendChild(letter);
                    //document.getElementById("body").appendChild(letter);
                }
            }               
            function log (w) {
                console.log(w);
            }


    </script>
</head>
<body>      
</body>
</html>

我也尝试document.getElementById("body").appendChild(letter);同样的错误。

堆栈追踪：

 Uncaught TypeError: Cannot read property 'appendChild' of null
 myFunc
 (anonymous function)

Answer 1

尝试将JavaScript放在底部（body标记下方或内部的任何位置）。

如果你没有jQuery，请使用它：

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

或者如果你有jQuery：

$( document ).ready(function() {
    //do work
});

document.body在调用scramble()时仍然不存在。

参考文献：

document.ready without jQuery

Answer 2

这是因为您在实际呈现BODY之前从HEAD标记内调用“scramble”方法。在“卸载”事件期间调用“scramble”运行，或者只是从页面底部的关闭BODY标记之前的SCRIPT标记中调用它。

创建范围并附加文本

2 个答案: