JS添加子节点报错：appendChild is not a function

报错信息：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible

sai小懒

11128人浏览 · 2020-08-15 16:58:56

sai小懒 · 2020-08-15 16:58:56 发布

报错信息：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="div1">
        <p>节点1</p>
        <p>节点2</p>
    </div>
    
    <script>
        var oSpan = document.createElement("span");
        var oTxt = document.createTextNode("新段落");
        oSpan.appendChild(oTxt);
        
        var oDiv = document.getElementsByClassName("div1");
        oDiv.appendChild(oSpan);
    </script>
    
</body>
</html>

在这里插入图片描述
神奇的信息，为啥appendChild不是一个函数，魔了

源头在于 —— document.getElementsByClassName(“div1”);

当使用 getElementsByClassName() 获取元素时，其返回的是数组，而没有定位到某一具体对象
（类似的还有 getElementsByTagName() 方法，getElementsByTagName() 方法返回 HTMLCollection 对象，HTMLCollection 对象类似包含 HTML 元素的一个数组，看起来可能是一个数组，但其实不是，不过可以像数组一样，使用索引来获取元素）

所以使用此类方法获取元素时，只需定位到某一具体元素，让浏览器知道在哪个元素下添加子节点即可
改正如下：document.getElementsByClassName(“div1”)[0];

华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

如何在鲲鹏平台上快速上手应用开发？鲲鹏DevKit给你答案

鲲鹏DevKit针对不同的业务场景，提供了应用迁移和系统迁移两套解决方案，帮忙开发者快速从X86平台迁移至鲲鹏平台，通过详细的迁移建议降低迁移门槛，可视化展示迁移进度，打消鲲鹏平台开发的顾虑。