仿微博界面新动态发布

<body>
    <textarea name="" id="text1" cols="40" rows="5" title="请输入新的动态"></textarea>
    <input type="button" value="发布" id="btn1">
    <ul id="ul1"></ul>


<script>

    var text1 = document.getElementById('text1');
    var btn1 = document.getElementById('btn1');
    var ul1 = document.getElementById('ul1');


    btn1.onclick = function(){
        var ali = document.createElement('li');

        ali.innerHTML = text1.value ;

        text1.value = '';
        if(ul1.children.length>0){ //判断子节点是否存在防止出错,个别浏览器不会因为ul里面是空而出错,有的浏览器会出错
            ul1.insertBefore(ul1,ul1.children[0]);
        }else{
            ul1.appendChild(ali);
        }

    };

自己在第二遍写的时候,新发布内容弹出显示框是用div装起来的,而每条新内容都在li里面,有li必须要有ul,因为只创建了div所以在后面新建li插入的时候出现错误;

猜你喜欢

转载自blog.csdn.net/qq_41880978/article/details/82713491