DOM实现发表评论

html:

 <input type="text"><button>发表</button>
    <ul></ul>

javascript:

<script>
        /* 
            点击发表将输入框的内容添加到ul的第一个子节点
        */
        // 获取元素 inp btn ul
        var inp = document.querySelector('input');
        var ul =document.querySelector('ul');
        var btn =document.querySelector('button');
        console.log(inp, ul, btn);

        // 点击button
        btn.onclick = function () {
            // 输入框的内容
            var txt = inp.value;
            console.log(txt);
            // 第一个子节点 创建子节点
            var li = document.createElement('li');
            li.innerHTML = txt;
            console.log(li);
            // 获取ul的所有的子节点
            console.log(ul.children);
            // 判断是否有子节点
            if(ul.children.length == 0){
                // 追加
                ul.appendChild(li);
            } else {
                // 添加到第一个
                ul.insertBefore(li, ul.children[0]);
            }

            // 清除输入框的内容
            inp.value = '';
        };
    </script>

效果：