Javascript 等待document.body存在_Javascript_Html_Css_Event Handling_Dom Events

Javascript 等待document.body存在

javascript html css

Javascript 等待document.body存在,javascript,html,css,event-handling,dom-events,Javascript,Html,Css,Event Handling,Dom Events,我编写了一个Chrome扩展，它在页面加载之前工作（使用属性“run\u at”：“document\u start”）。问题是，我想在网页主体创建后立即向其添加div标记。在此之前，document.body为空，因此我无法向其添加标记我不在乎身体的负荷，我只需要它存在我试图找到在创建html中的body标记（未完全加载，只是创建）时发出警报的最佳方式。这个案例有没有我可以编写的事件处理程序另外，我不想使用jQuery或任何其他非内置库。您可以使用类似于$（document.read

我编写了一个Chrome扩展，它在页面加载之前工作（使用属性

“run\u at”：“document\u start”

）。问题是，我想在网页主体创建后立即向其添加

div

标记。在此之前，

document.body

为空，因此我无法向其添加标记

我不在乎身体的负荷，我只需要它存在

我试图找到在创建html中的

body

标记（未完全加载，只是创建）时发出警报的最佳方式。这个案例有没有我可以编写的事件处理程序

另外，我不想使用

jQuery

或任何其他非内置库。

您可以使用类似于

$（document.ready（）

说

当

文档

已加载时，将触发

DOMContentLoaded

事件完全加载和解析，无需等待样式表、图像，和完成加载的子帧（可使用

load

事件检测完全加载的页面）

您可以在

document.documentElement

上使用，监听其

子列表的更改，并查看添加的内容是否为正文

例如：
作者说他“不在乎身体的全部负荷”，他“只需要它存在”。但是DOMContentLoaded
事件是在文档
完全加载之后触发的，它表示在之后@tjcrowder的答案正是@ygandelsman所需要的。
document.addEventListener("DOMContentLoaded", function(event) {
   console.log("DOM fully loaded and parsed");
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <script>
    (function() {
      "use strict";

      var observer = new MutationObserver(function() {
        if (document.body) {
          // It exists now
          document.body.insertAdjacentHTML(
            "beforeend",
            "<div>Found <code>body</code></div>"
          );
          observer.disconnect();
        }
      });
      observer.observe(document.documentElement, {childList: true});
    })();
  </script>
</head>
<body>
  <div id="foo"></div>
</body>
</html>