如何修复未捕获的 TypeError：无法读取 null 的属性“outerHTML”答案

【问题标题】：How to fix uncaught TypeError: Cannot read property 'outerHTML' of null如何修复未捕获的 TypeError：无法读取 null 的属性“outerHTML”
【发布时间】：2018-03-22 22:46:00
【问题描述】：

我有一个 Bootstrap 弹出框脚本，当我单击该按钮时，它会在 Java 控制台中返回一个错误。所以按钮显示得很好，当我点击它时，我可以看到弹出框链接到的 html 文件的内容，但它会触发一个错误，在控制台中出现两次：

未捕获的类型错误：无法读取 null 的属性“outerHTML”。

我尝试将outerHTML 替换为innerHTML，但这没有帮助。

任何想法如何解决这个问题？

<button type="button" data-templatefile="Text.html" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" style='float:right;margin-right:50px'>
  My popover button
</button>

<script>
  function loadContent(templateFile) {
    return $('<div>').load(templateFile, function(html) {
      parser = new DOMParser();
      doc = parser.parseFromString(html, "text/html");
      return doc.querySelector('h1').outerHTML + doc.querySelector('body').outerHTML;
    })
  }
  $('[data-toggle="popover"]').popover({
    html : true,
    content : function() {
      return loadContent($(this).data('templatefile'))
    }
  });
</script>

【问题讨论】：

“我已经尝试过...innerHTML”。为什么？错误消息明确指出，doc.querySelector('h1') 是 null。
请同时提供模板文件
你想象 loadContent返回什么？
并且，.popover 的 content 参数应该是一个函数吗？
the error message clearly states, that doc.querySelector('h1') is null 不，它没有 - 为什么doc.querySelector('body') 不能是空的：p

标签： javascript jquery twitter-bootstrap popover

【解决方案1】：

实际上，我已经通过在包含弹出框内容的链接 html 中添加一个来修复它。现在是这样的：

<body><h1>my text here</h1></body>

当我单击弹出框时，Java 控制台中不再出现错误。谢谢

【讨论】：