错误“无法设置属性‘innerHTML’为空”答案

【问题标题】：Error "Cannot set property 'innerHTML' of null"错误“无法设置属性‘innerHTML’为空”
【发布时间】：2019-12-16 17:13:28
【问题描述】：

以下是 HTML 代码。我正在尝试使用 ace js 创建编辑器

<!DOCTYPE html>
<html lang="en">

<head>
  <script>
    window.onload = function what() {
      var a = document.getElementById("abc");
      a.innerHTML = 'hi';
    };
  </script>
  <title>ACE in Action</title>
  <style type="text/css" media="screen">
    #editor {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  </style>

</head>

<body>

  <div id="editor">
    <span id="abc">Class </span>{ public void add(int a, int b){ int sum=a+b; } }
  </div>
  <script src="http://ajaxorg.github.io/ace-builds/src/ace.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://ajaxorg.github.io/ace-builds/src/ext-language_tools.js"></script>
  <script type="text/javascript" src="ClassData.json"></script>
  <script>
    var langTools = ace.require("ace/ext/language_tools");
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.session.setMode("ace/mode/java");
    editor.setOptions({
      enableBasicAutocompletion: true
      // enableLiveAutocompletion: true
    });
    var staticWordCompleter = {
      getCompletions: function(editor, session, pos, prefix, callback) {
        var wordList = ["foo", "bar", "baz", "arpit", "abhishek"];
        callback(null, wordList.map(function(word) {
          return {
            caption: word,
            value: word,
            meta: "class"
          };
        }));

      }
    }

    langTools.addCompleter(staticWordCompleter);
  </script>
</body>

</html>

错误：

错误“无法将属性 'innerHTML' 设置为 null”。

我正在尝试使用 Ace JS 创建一个在线编辑器，其功能包括在创建任何对象时自动导入包并添加自定义类名称。为此，我在 Class 旁边添加了一个“p”标签，以便可以在该行中插入一些文本，但它无法检测到名为“abc”的 id。

【问题讨论】：

将该脚本移至<body/>
请解决这个问题：<body >.
也试过了..没用
@Pankwood <body > 没有错；这是完全有效的 HTML。
我愿意编辑器代码对其进行更改，因此它不起作用....所以看看编辑器对您的元素做了什么....或者重新考虑您正在尝试做什么.

标签： javascript html ace-editor

【解决方案1】：

您使用的 ACE 编辑器似乎不接受文本字段中的 HTML。打开开发者工具并检查内容显示 ACE 编辑器删除了 ID 为 abc 的 span，这就是为什么您在尝试访问不存在的元素时得到一个空指针。

编辑器已将文本的开头修改为在开发人员工具中查看时看起来像 <span class="ace_support ace_function">Class</span>。

【讨论】：