纯js模仿博客评论

最新推荐文章于 2022-07-27 18:03:14 发布

lgdshr123

最新推荐文章于 2022-07-27 18:03:14 发布

阅读量435

点赞数

分类专栏： JavaScript 文章标签： web前端 js 函数

本文链接：https://blog.csdn.net/lgdshr123/article/details/52302855

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<script>
    var title = document.getElementById('title');//或得表单的title元素
    var textarea = document.getElementById('form_tet');//获得表单多行文本输入框元素
    var con = document.getElementById('con');//获得列表元素
    var lis = con.children;//获得列表的子元素
    var submit = document.getElementById('submit');

    submit.onclick = function () {
        var newLi = document.createElement('li');//创建节点
        var newDiv = document.createElement('div');//创建一个div
        newDiv.setAttribute('class', 'con_title');//给div添加一个类名
        var newH3 = document.createElement('h3');
        var newSpan = document.createElement('span');
        newSpan.innerHTML = '删除';//设置span里的 内容
        var newp = document.createElement('p');
        if (title.value == '') {//判断输入框是否为空，若为空则直接返回函数
            alert('标题不能为空');
            return 0;
        } else if (textarea.value == '') {
            alert('内容不能为空');
            return 0;
        }
        newH3.innerHTML = title.value;
        newp.innerHTML = textarea.value;
        /*往各级里插入新建的节点*/
        newDiv.appendChild(newH3);
        newDiv.appendChild(newSpan);
        newLi.appendChild(newDiv);
        newLi.appendChild(newp);
        con.insertBefore(newLi, lis[0]);
        /*将输入框里的内容清空*/
        title.value = '';
        textarea.value = '';
        /*在插入一个li节点时给删除块加一个点击事件*/
        newSpan.onclick = function () {
            con.removeChild(newLi);
        }
    }
</script>