JavaScript动态创建div嵌套入现有div时运行失败如何解决

问题原因 #

• document.getElementsByClassName() 返回的是匹配指定类名的所有DOM元素组成的类数组集合（HTMLCollection），不属于单个DOM节点，没有appendChild方法，直接调用会触发类型错误。
• 额外问题：你将容器查询逻辑写在了循环内部，会导致每次遍历都重复查询DOM树，造成不必要的性能损耗。

解决方法 #

有两种可行修改方案：

1. 从getElementsByClassName返回的集合中取第一个匹配的元素使用
2. 优先使用document.querySelector()直接获取单个DOM元素，写法更简洁，推荐使用
   另外建议将容器查询逻辑移到循环外部，仅执行一次DOM查询即可。

修正后示例代码 #

const pic = result.results;
// 直接获取单个.photos容器，仅查询一次DOM
const gallery = document.querySelector('.photos');  
pic.forEach(photo => {
    const newDiv = document.createElement("div");
    newDiv.className = 'photo';
    // 给src属性添加引号，避免路径包含特殊字符时出现解析错误
    newDiv.innerHTML = `<img src="${photo.urls.small}">`
    gallery.appendChild(newDiv);
});

如果坚持使用getElementsByClassName，修改方式如下：

const pic = result.results;
const gallery = document.getElementsByClassName('photos')[0]; // 取集合中第一个元素
pic.forEach(photo => {
    const newDiv = document.createElement("div");
    newDiv.className = 'photo';
    newDiv.innerHTML = `<img src="${photo.urls.small}">`
    gallery.appendChild(newDiv);
});

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