美文网首页
移动选项框

移动选项框

作者: 陈庆香 | 来源:发表于2018-08-01 17:58 被阅读0次

    function add(){

    //获取文本框的值

    var ipt=doument.createElementById('ipt');

    var text=ipt.vlaue;

    //创建li

    var li=doument.createElement('li');

    //判断text是否为空

    if(!text){

    alert('不能为空');

    return;

    }

    //填充li的内容

    li.linnerHTML=`<span>${text}</span><button onclick='move();'  class='margin-left-30'>-></button>`;

    //找到li的类型

    li.className='item';

    //清空文本框

    ipt.value='';

    //把li添加到list1中

    doument.getElementById('list1').appendchild(li);

    }

    //添加move的点击事件

    function move(){

    //找到当前按钮

    var button=event.target;

    //声明按钮的值

    var btnText=button.innerText;

    //通过button找到li

    var li=button.parenNode;

    //判断按钮的值是否为->

    if(btnText==='->'){

    //改变button的值

    button.innerText = '<-';

    //获取span的值

    var span=button.previousElementSibling;

    //清空button的类型

    button.className='';

    //添加span的类型

    span.className='margin-left-30';

    //把span排到button的前面

    li.insertBefore(span,button);

    //把li添加到list2里面;

    doument.getElementById('list2').appendchi(li);

    }else{

    button.innerText = '->';

    var span = button.nextElementSibling;

    button.className = 'margin-left-30';

    span.className = '';

    li.insertBefore(span,button);

    document.getElementById('list1').appendChild(li);

    }

    funtion enter(){

    if(event.keyCode===13){

            add();

    }

    }

    }

    相关文章

      网友评论

          本文标题:移动选项框

          本文链接:https://www.haomeiwen.com/subject/vlvrvftx.html