JavaScript 中 TypeError: appendChild is not a function 错误

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript 中 TypeError: appendChild is not a function 错误

作者：迹忆客最近更新：2023/01/20 浏览次数：

出现“TypeError: appendChild is not a function”的原因有多种：

对非 DOM 元素的值调用 appendChild() 方法。
将 JS 脚本标记放在声明 DOM 元素的代码上方。
拼写错误的 appendChild - 它区分大小写。

下面是产生上述错误的一个示例

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

  <body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>

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

请注意 ，JS 脚本标签位于 body 标签的底部。

如果我们将 JS 脚本标记放在声明 DOM 元素的代码之上，它们将无法在 index.js 文件中访问。

这是 index.js 中的代码。

const boxes = document.getElementsByClassName('box');
console.log(boxes); // 👉️ [div.box, div.box, div.box]

const child = document.createElement('div');
child.innerHTML = `<h1>Hello world</h1>`;

// ⛔️ TypeError: appendChild is not a function
boxes.appendChild(child);

我们在 NodeList 而不是 DOM 元素上调用了 Node.appendChild 方法，这导致了错误。

只在有效的 DOM 元素上调用 appendChild

要解决“appendChild is not a function”错误，需要确保只在有效的 DOM 元素上调用 appendChild 方法，并在 DOM 元素声明后将 JS 脚本标记放在正文的底部。

const boxes = document.getElementsByClassName('box');
console.log(boxes); // 👉️ [div.box, div.box, div.box]

const child = document.createElement('div');
child.innerHTML = `<h1>Hello world</h1>`;

// ✅ Works
boxes[0].appendChild(child);

通过访问 NodeList 索引 0 处的元素，我们得到了一个 DOM 元素，我们可以在其上安全地调用 appendChild 方法。

在调用 appendChild() 之前检查 DOM 元素是否存在

如果我们调用该方法的元素有时不存在，请在调用 appendChild 方法之前有条件地检查该元素是否存在。

例如，一个基本的 DOM 元素有一个对象类型，所以我们可以在调用方法之前检查该值是否是一个对象并且包含 appendChild 属性。

const box = null;

if (typeof box === 'object' && box !== null && 'appendChild' in box) {
  const child = document.createElement('div');
  child.innerHTML = `<h1>Hello world</h1>`;

  box.appendChild(child);
}

我们的 if 条件使用逻辑与 (&&) 运算符，因此要运行 if 块，必须满足所有条件。

我们首先检查 box 变量是否存储了具有对象类型的值，因为 DOM 元素具有对象类型。

然后我们检查变量是否不等于 null。不幸的是，如果我们使用 console.log(typeof null) 检查 null 的类型，我们将得到一个“object”值，因此我们必须确保该值不为 null。

console.log(typeof null); // 👉️ object

我们检查的最后一件事是该对象包含 appendChild 属性。

然后我们知道我们可以安全地对该对象调用 appendChild 方法。

这种方法称为 duck-typing。

使用 duck-typing 时，我们只需检查对象是否实现了特定的属性或方法，如果实现了，我们就假定它是正确类型的对象。

总结

要解决“TypeError: appendChild is not a function”的问题，需要确保只在有效的 DOM 元素上调用 appendChild 方法，并将 JS 脚本标记放在主体的底部，在声明 DOM 元素后。

上一篇：使用 JavaScript 在单击时切换元素的背景颜色

下一篇：JavaScript 中 TypeError: Converting circular structure to JSON 错误

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享