Day29 - js 动态添加、删除元素

阻止事件的默认行为:evt.preventDefault();
删除元素（删除子节点）:parentNode.removeChild();
创建新元素:document.createElement();
添加子节点:appendChild();
在指定位置加入节点:insertBefore();

        <script type="text/javascript">
            var ul = document.getElementById('fruits');
            var input = document.querySelector('#container input[type=text]');
            
            function removeItem(evt){
                    // 阻止事件的默认行为
                    evt.preventDefault();
                    var a = evt.target || evt.srcElement;
                    var li = a.parentNode;
                    // 删除元素（删除子节点）
                    li.parentNode.removeChild(li);
            }
            
            function addItem(){
                var friuitName = input.value.trim();
                if (friuitName.length > 0){
                    // 创建新元素
                    var li = document.createElement('li');
                    li.textContent = friuitName;
                    var a = document.createElement('a');
                    a.href = '';
                    a.textContent = '×';
                    a.addEventListener('click', removeItem);
                    li.appendChild(a)
                    // 添加子节点
                    // ul.appendChild(li);
                    // 在指定位置加入节点
                    ul.insertBefore(li, ul.firstChild);
                }
                input.value = '';
                input.focus();
            }
            
            var anchors = document.querySelectorAll('#fruits a');
            for (var i = 0; i < anchors.length; i += 1){
                anchors[i].addEventListener('click', removeItem);
            }
            
            input.addEventListener('keypress', function(evt){
                var key = evt.keyCode || evt.which;
                if (key == 13){
                    addItem();
                }
            });
            
            var okButton = document.querySelector('#ok');
            okButton.addEventListener('click', addItem);
        </script>

        <script type="text/javascript">
            function randomColor(){
                r = parseInt(Math.random() * 256);
                g = parseInt(Math.random() * 256);
                b = parseInt(Math.random() * 256);
                
                return 'rgb(' + r + ',' + g + ',' + b + ')';
            }
            
            var bigBox = document.querySelector('#big')
            var createButton = document.getElementById('button1');
            var flaButton = document.getElementById('button2');
            var span = document.querySelector('#button2>span');
            
            function create(){
                var div = document.createElement('div');
                div.style.backgroundColor = randomColor();
                bigBox.appendChild(div);
            }
            
            
            function fla(){
                if(flag){
                    timerId = window.setInterval(function(){
                        var div = document.querySelectorAll('#big>div');
//                  console.log(div[1]);
                        changeColor(div);
                        span.textContent = '暂停';
                        flag = false;
                    },10);
                }else{
                    window.clearInterval(timerId);
                    span.textContent = '闪烁';
                    flag = true;
                }
                
            }
            
            function changeColor(div){
//              console.log(div[1]);
//              console.log(div.length);
//              div[1].style.backgroundColor = 'red';
                for(var i = 0; i < div.length; i += 1){
                    div[i].style.backgroundColor = randomColor();
                }
            }
            
            createButton.addEventListener('click', create);
            
            var flag = true;
            flaButton.addEventListener('click', fla);
            
        </script>