Javascript HTML元素仅在输入输入提示符后显示_Javascript_Html_Dom

Javascript HTML元素仅在输入输入提示符后显示

javascript html dom

Javascript HTML元素仅在输入输入提示符后显示,javascript,html,dom,Javascript,Html,Dom,我正在编写非常简单的JavaScript代码，通过在提示符中输入新标题来替换h1标题。我不明白为什么第一次加载页面时原始标题不显示。只有在提示符中输入新标题后，标题才会显示。我已经在正文的末尾放置了脚本标记。我做错了什么？我确实在控制台上登录了最初的标题“Hello World” <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Playing w

我正在编写非常简单的JavaScript代码，通过在提示符中输入新标题来替换

h1

标题。我不明白为什么第一次加载页面时原始标题不显示。只有在提示符中输入新标题后，标题才会显示。我已经在正文的末尾放置了脚本标记。我做错了什么？我确实在控制台上登录了最初的标题“Hello World”

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Playing with the DOM</title>
  </head>
  <body>
    <div>
      <h1 id="main-heading">Hello World</h1> 
    </div>
    <script>
      var headingElement = document.getElementById('main-heading');
      console.log(headingElement.innerHTML);
      var newHeadingText = prompt('Please provide a new heading');
      headingElement.innerHTML = newHeadingText;
    </script>
  </body>
</html>


玩DOM
你好，世界
var headingElement=document.getElementById（'main-heading'）；
log（headingElement.innerHTML）；
var newHeadingText=prompt（'请提供新标题'）；
headingElement.innerHTML=newHeadingText；

这是一种有点老套的方式，并不是每次都能正常工作（看起来像是Chrome的功能），但您可以同时添加

DOMContentLoaded

侦听器和empty

setTimeout

，这样可以在执行脚本之前完全加载DOM：

document.addEventListener（'DOMContentLoaded'，function（）{
setTimeout（函数（）{
var headingElement=document.getElementById（'main-heading'）；
var newHeadingText=prompt（'请提供新标题'）；
headingElement.innerHTML=newHeadingText；
})
});

你好，世界
这是一种有点老套的方式，并不是每次都能正常工作（看起来像是Chrome的功能），但您可以同时添加DOMContentLoaded
侦听器和emptysetTimeout
，这样可以在执行脚本之前完全加载DOM：

document.addEventListener（'DOMContentLoaded'，function（）{
setTimeout（函数（）{
var headingElement=document.getElementById（'main-heading'）；
var newHeadingText=prompt（'请提供新标题'）；
headingElement.innerHTML=newHeadingText；
})
});

你好，世界
浏览器就是这样工作的。body
中的HTML按照它出现的顺序进行解析，每当遇到脚本时，它也会被解析和执行。然后继续解析HTML的其余部分。最后，所有元素都被解析，浏览器知道要显示什么，页面实际被呈现。@Teemu我想您实际上想说“Chrome浏览器就是这样工作的”，因为浏览器没有理由停止呈现脚本之前的页面部分。。。IE，Edge和FF显示页面很好（现在是否有用的行为是单独讨论的，真实页面不太可能出现这种情况）@AlexeiLevenkov是的，我也注意到了，但修复评论为时已晚，尽管一些较老的IE也在等待阻止脚本，有时还有FF，可能取决于缓存…scabiosa-发布您自己的解决方案作为答案是可以的，但编辑带答案的问题是违反SO准则的（因为编辑后问题不再是问题）-所以我回滚了您的编辑。这也是一个坏主意，张贴链接只回答你做了（请检查）。如果您需要讨论我的回滚，请确保在标签“特定问题”上张贴澄清问题。这就是浏览器的工作方式。body
中的HTML按照它出现的顺序进行解析，每当遇到脚本时，它也会被解析和执行。然后继续解析HTML的其余部分。最后，所有元素都被解析，浏览器知道要显示什么，页面实际被呈现。@Teemu我想您实际上想说“Chrome浏览器就是这样工作的”，因为浏览器没有理由停止呈现脚本之前的页面部分。。。IE，Edge和FF显示页面很好（现在是否有用的行为是单独讨论的，真实页面不太可能出现这种情况）@AlexeiLevenkov是的，我也注意到了，但修复评论为时已晚，尽管一些较老的IE也在等待阻止脚本，有时还有FF，可能取决于缓存…scabiosa-发布您自己的解决方案作为答案是可以的，但编辑带答案的问题是违反SO准则的（因为编辑后问题不再是问题）-所以我回滚了您的编辑。这也是一个坏主意，张贴链接只回答你做了（请检查）。如果您需要讨论我的回滚，请确保在标记“特定问题”上张贴澄清问题。@scabiosa，注意，它大多数时候都有效，但不是每次都有效！小心点；）为什么这不起作用？document.addEventListener（“DOMContentLoaded”，function（）{var headingElement=document.getElementById（'main-heading'）；var newHeadingText=prompt（'请提供新标题'）；headingElement.innerHTML=newHeadingText；}）@scabiosa，不，它可以工作，但如果您将测试代码段20次（例如，可能是一次），则在显示警报之前不会呈现默认的
。我测试了很多次，甚至没有得到一次它可以工作：（.那么在这种情况下使用jQuery更可靠吗？@scabiosa，如果您愿意这样做，您可以使用setTimeout
delay来确保
将在警报框之前呈现。您可以这样使用它：setTimeout（function（）{//code here}，delay）
。在我编写的delay
中，您可以以毫秒为单位指定延迟。@scabiosa，注意，它大多数时候都有效，但不是每次都有效！小心；）这为什么不起作用？document.addEventListener（“DOMContentLoaded”，function（）{var headingElement=document.getElementById（'main-heading'）；var newHeadingText=prompt（'Please Provider a new heading'）；headingElement.innerHTML=newHeadingText；}）；@scabiosa，不，它可以工作，但如果您将测试代码段20次，可能是一次，则在显示警报之前不会呈现默认的
。我测试了很多次，甚至没有得到一次它可以工作：（.那么在这种情况下使用jQuery更可靠吗？@scabiosa，如果您愿意这样做，您可以使用