文件在函数调用中编写和调用innerHTML

Question

我是javascript的新手，我想知道为什么在这个脚本中，document.write工作得很好，而innerHTML却不行（我在正文中给出了一个div id计时器）。是innerHTML需要在html的正文部分加载事件吗？如果是，为什么？（我在html文档的头部分调用函数Writehere（）。

<script language="javascript">

 function writehere()

 {
       document.write("hello");

       var Timer = document.getElementById("timer");

        Timer.innerHTML = "hello";


}

writehere();

</script>

html代码在这里。。。。。

Answer 1

这都是关于HTML标记元素和执行时间的。在您的示例中，脚本位于head标记中，因此在执行脚本时，元素div#timer根本不存在。

那么你有2个解决方案：

• 将脚本移动到页面末尾（标记之前），

如果您的DOM并不复杂，并且不包含img标记或需要从网络中获取的任何类型的元素，则不需要使用onload。您可以在两种情况下使用它：

• 您必须等待加载所有元素，如图像、视频等。

一般来说，将脚本标记放在文档的末尾是否被认为是一种良好的实践（因此您不需要使用onload），它可以防止非样式内容（FOUC）的闪存。Javascript阻止你的浏览器渲染引擎。因此，如果JavaScript标签是在内容对用户可用之前放置的（阅读：在头标签中），浏览器将执行它，DOM几乎是空的，用户在执行期间只会看到一个空白页面。

另外，关于jQuery。fn。就绪方法，您必须注意以下几点：

$(document).ready(function() {
    // my first useless function
    console.log( "first", 1 );
});

$(document).ready(function() {
    // my second useless function
    // this function will throw an (intentional) error
    console.log( "second", someUndefinedVariable );
});

$(document).ready(function() {
    // my third useless function
    // because the previous function contains an error
    // this function will never be called
    console.log( "third ", 3 );
});

假设你正在使用一些插件，你有一些手写的代码等等。如果每个插件和代码都在使用jQuery。fn。ready方法，并且如果由于某种原因（比如在某些情况下的特定浏览器版本中）某个函数抛出错误，那么该函数之后的所有处理程序将永远不会运行。。。

而且，这样做，你会在最后延迟所有“真正的”JavaScript执行，如果你有很多方法要在队列中运行，那么你可能会在几秒钟内阻塞浏览器，用户会通知它。

Answer 2

我想你的问题是DOM还没有加载，所以没有id="Timer"的div元素。您应该在onLoad事件中调用此方法。

Answer 3

最可能的问题是，在代码执行时DOM还没有准备好。对于您的示例，您可能只需将其向下移动到页面底部即可。

通常，您希望在执行需要与DOM交互的javascript之前确保DOM已完全加载，例如，如果使用jQuery，您可以在document ready函数中调用代码以确保加载DOM

   $(document).ready({

    });

请看一看这个关于香草javascript等价物的SO问题

什么是非jQuery等效的$（文档）。准备（）？