每当点击按钮的时候 ,新的列表项（孤儿节点）不出现？

来源：4-21 事件委托（1）

我不是胖球球

2021-06-07 17:15:12

相关代码：

<!DOCTYPE html>
<html lang="en">

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

<body>
    <button id="btn">按我添加新的列表项</button>
    <ul id="list"></ul>

    <script>
        var oBtn = document.getElementById('btn');
        var oList = document.getElementsByTagName('list');

        // 创建按钮的点击事件 
        oBtn.onclick = function () {
            // 每当点击按钮的时候 ,都需要创建一个新的列表项,孤儿节点
            var oLi = document.createElement('li');
            oLi.innerHTML = "我是列表项";
            // 上树
            oList.appendChild(oLi); //oList.appendChild is not a function at HTMLButtonElement.oBtn.onclick ???
            // 给新创建的li节点添加onclick事件监听
            oLi.onclick = function () {
                this.style.color = 'red';
            };
        };
    </script>
</body>

</html>