类型错误：innerHTML 不是 JavaScript 中的函数

作者

TypeError: innerHTML 不是 JavaScript 中的函数

TypeError: innerHTML is not a function in JavaScript

当我们尝试将
innerHTML属性作为函数调用时，会出现“TypeError: innerHTML is not a function”。

innerHTML要解决该错误，请为特定 DOM 元素的属性分配一个值，例如element.innerHTML = 'example'。

typeerror innerhtml 不是函数

下面是错误如何发生的示例。

索引.js
const box = document.getElementById('box');

// ⛔️ TypeError: innerHTML is not a function
box.innerHTML('<h1>New Content</h1>');

我们通过使用该getElementById方法访问了 DOM 元素，并尝试将
Element.innerHTML
属性作为函数调用，这导致了错误。

用作innerHTML属性，而不是函数

要解决该错误，请为 DOM 元素的属性设置一个特定值innerHTML，而不是将其作为函数调用。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">Box</div>

    <!-- ✅ Your JS script here ✅ -->
    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const box = document.getElementById('box');

// ✅ Works
box.innerHTML = '<h1>New Content</h1>';

该innerHTML属性设置包含在特定 DOM 元素中的 HTML 标记。

请注意，在innerHTML属性上设置新值会将元素的内容替换为提供的值。

如果您要阅读元素的 HTML 内容，请在innerHTML
不为其赋值的情况下访问该属性。

索引.js
const box = document.getElementById('box');

// 👇️ "<span>Box</span>"
console.log(box.innerHTML);

添加 DOM 元素而不是替换当前标记

如果您要添加 DOM 元素而不是替换元素中包含的当前标记，请使用类似
Element.insertAdjacentHTML的方法。

索引.js
// 👇️ <div id="box1">Box 1</div>
const box1 = document.getElementById('box1');

box1.insertAdjacentHTML('afterend', `<div id="box2">Box 2</div>`);

/** 👇️ Result
 * <div id="box1">Box 1</div>
 * <div id="box2">Box 2</div>
 */

The first argument we passed to the insertAdjacentHTML() method is the
position we want to insert the HTML at.

There are 4 positions to pick from:

  • beforebegin – insert before the element
  • afterbegin – insert inside of the element, before its first child
  • beforeend – insert inside the element, after its last child
  • afterend – insert after the element

Conclusion #

The “TypeError: innerHTML is not a function” occurs when we try to call the
innerHTML property as a function.

To solve the error, assign a value to the innerHTML property of the specific
DOM element, e.g. element.innerHTML = 'example'.

–