创建跨度并附加文本答案

【问题标题】：create span and append text创建跨度并附加文本
【发布时间】：2015-02-26 10:15:41
【问题描述】：

我正在尝试创建跨度并将拆分字符串附加为每个跨度中的字符。因此，鉴于下面的消息，它会类似于 <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)

【问题讨论】：

我在 jsfiddle 中试过，效果很好
是的^那个。你用的是什么浏览器？
铬。我在上面添加了更多
您能否发布完整的示例代码（html 和 js）来展示您所描述的问题？
@ChrisPietschmann 在上面添加

标签： javascript html

【解决方案1】：

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

如果你没有 jQuery，也可以使用这个：

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

或者如果你有 jQuery：

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

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

参考资料：

document.ready without jQuery

【讨论】：

是的。 “在底部”，您的意思是作为 body 元素的最后一个子元素。然而，由于这段代码特别是只访问document.body，它甚至可以作为body的第一个孩子工作。
感谢@Spooky 提出这个问题，我在答案中编辑了 bottom 的定义以更具体。

【解决方案2】：

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

【讨论】：