Question

我＆＃39;我是javascript的新手，我想知道为什么在这个脚本中document.write运行良好而innerHTML没有（我在身体中给出了一个div id计时器）。是不是innerHTML在html的正文部分需要Onload事件？如果是这样的话？（我在html文档的head部分调用函数writehere()。

<script language="javascript">

 function writehere()

 {
       document.write("hello");

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

        Timer.innerHTML = "hello";


}

writehere();

</script>

html代码就在这里.....

Answer 1

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

一般情况下，您需要确保在执行需要与DOM交互的javascript之前完全加载DOM，如果您使用的是jQuery，则可以在文档就绪函数中调用代码以确保DOM已加载，例如

   $(document).ready({

    });

看看这个关于vanilla javascript等效的SO问题

What is the non-jQuery equivalent of '$(document).ready()'?

Answer 2

我认为你的问题是DOM还没有加载，所以没有div元素id =“Timer”。你应该在onLoad事件上调用这个方法。

Answer 3

所有关于HTML标签元素和执行时间。在您的示例中，脚本位于head tag中，因此在执行脚本时，元素div＃timer根本不存在。

然后你有2个解决方案：

在the end of the page（标记前）
延迟执行您的脚本using onload event

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

你必须等待加载所有元素，如图像，视频等，
您希望延迟执行低优先级脚本，例如在您的网站上加载广告的脚本。此脚本对您的网站和访问者来说并不重要，执行可能会延迟

一般情况下，将script标记放在文档的末尾（因此您不需要使用onload）是一种很好的做法，它可以防止无格式的Flash内容（FOUC）。 Javascript阻止您的浏览器呈现引擎。因此，如果在内容对用户可用之前放置了JavaScript标记（读取：在head标记中），浏览器将执行它，DOM几乎为空，并且用户在此执行时间内只会看到空白页。 / p>

另外，关于jQuery.fn.ready方法，您必须注意这一点：

$(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执行，如果你有很多方法在队列中运行，那么你可以在几秒钟内阻止浏览器，并且用户将通知它。

函数调用中的document.write和innerHTML

3 个答案: