zoukankan      html  css  js  c++  java
  • 案例:简单版发布留言功能

    <textarea name="" id=""></textarea >
    <button>发布</button>
    <ul></ul>
    
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 2. 注册事件
        btn.onclick = function() {
            if (text.value == '') {
                alert('您没有输入内容');
                return false;
            } else {
                //(1)创建元素
                var li = document.createElement('li');
                // 先有li才能赋值
                // 阻止链接跳转需要添加javascript:void(0);或者javascript:;
                li.innerHTML = text.value + "<a href='javascript:;'></a>"
                //(2)添加元素
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
                //(3)删除元素,删除的是当前a链接所在的li
                var as document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        // 删除的是当前a所在的li,也就是a的父元素
                        ul.removeChild(this.parentNode);
            }
        }
    </script>
  • 相关阅读:
    元素的属性
    表单
    Array数组类
    string类
    js数据类型以及原型分析
    this
    有关兼容性的解决
    单位
    滚动条 和 背景位置及绝对定位
    圣杯布局 和 双飞翼布局
  • 原文地址:https://www.cnblogs.com/zcy9838/p/12934039.html
Copyright © 2011-2022 走看看