Js 中 Cannot read property 'appendChild' of Undefined 错误

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

WEB前端编程语言网络算法操作系统数据库

Js 中 Cannot read property 'appendChild' of Undefined 错误

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

“Cannot read property 'appendChild' of Undefined”错误的发生有两个原因：

在不存在的 DOM 元素上调用 appendChild 方法。
在声明 DOM 元素的 HTML 上方插入 JS 脚本标记。

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

const el = undefined;

const p = document.createElement('p');

// ⛔️ Uncaught TypeError: Cannot read properties of undefined (reading 'appendChild')
el.appendChild(p);

Js 中 Cannot read property 'appendChild' of Undefined

该错误最常发生在访问不存在的索引处的数组之后，例如在调用 getElementsByClassName 之后。

const arr = [];

const p = document.createElement('p');

// ⛔️ Cannot read properties of undefined (reading 'appendChild')
arr[0].appendChild(p);

要解决“Cannot read property 'appendChild' of null”错误，请确保调用 appendChild() 方法的 DOM 元素包含在 DOM 中。

const elements = document.getElementsByClassName('does-not-exist');
console.log(elements); // 👉️ []

const p = document.createElement('p');

// ⛔️ Cannot read properties of undefined (reading 'appendChild')
elements[0].appendChild(p);

因为我们为 getElementsByClassName 方法提供了一个无效的类名，它返回一个空的类数组对象，所以访问它的第 0 个索引返回未定义，导致错误。

要解决“Cannot read property 'appendChild' of null”错误，在声明所有 DOM 元素后，在 body 标签底部插入 JS script 标签。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- ⛔️ BAD - script is run before div exists ⛔️ -->
    <script src="index.js"></script>

    <div class="box"></div>
  </body>
</html>

因为我们将 JS 脚本标记放在 div 元素之上，所以在将 div 元素添加到 DOM 之前运行 index.js 文件。

如果我们现在运行 index.js 文件， div 元素将不可用。

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

const p = document.createElement('p');

// ⛔️ Cannot read properties of undefined (reading 'appendChild')
boxes[0].appendChild(p);

在声明 HTML 之后，我们必须将 JS 脚本标记放在正文的底部。

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

    <!-- ✅ GOOD - div already exists ✅ -->
    <script src="index.js"></script>
  </body>
</html>

现在我们可以访问 index.js 文件中的 div 元素。

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

const p = document.createElement('p');

// ✅ works
boxes[0].appendChild(p);