为何JavaScript中用appendChild插入div时提示‘不是函数’？

错误原因 #

document.getElementsByClassName('container') 返回的是HTMLCollection（类数组对象），不是单个DOM元素。这类数组对象没有appendChild方法，直接调用就会抛出类型错误。

修正方案 #

你需要从这个集合里取出目标元素，再调用appendChild，两种常用方式如下：

方式1：取第一个匹配元素（页面仅有一个container类元素时适用） #

const board = document.createElement('div');
const mainContainer = document.getElementsByClassName('container')[0]; // 提取第一个元素
board.className = 'blah';
mainContainer.appendChild(board);

方式2：用querySelector直接获取单个元素 #

querySelector会返回匹配选择器的第一个元素，写法更简洁：

const board = document.createElement('div');
const mainContainer = document.querySelector('.container'); // 类选择器语法
board.className = 'blah';
mainContainer.appendChild(board);

额外提示 #

如果页面存在多个container类元素，需要遍历集合给每个元素添加子节点，注意要克隆节点避免重复添加同一个元素：

const boardTemplate = document.createElement('div');
boardTemplate.className = 'blah';
const containers = document.getElementsByClassName('container');
for (const container of containers) {
  container.appendChild(boardTemplate.cloneNode(true));
}

内容的提问来源于stack exchange，提问作者GianmarcoMorelli