美文网首页
HTML DOM增加删删除操作

HTML DOM增加删删除操作

作者: 90后IT | 来源:发表于2017-09-14 21:27 被阅读0次

    /**

    * 思路:

    * 1、获取对象

    * 2、添加事件

    * 添加:

    * 3、创建ul标签

    * 4、判断inputTxt的值是否为空,为空的话弹出提示,有值的话继续执行添加

    * 5、创建li标签,创建文本节点;

    * 6、把创建的文本节点,放入li里,把创建li标签放入ul标签里;

    * 7、把创建ul标签放入id为box的div里

    * 点击删除

    * 1、获取box里的所有的li,

    * 循环遍历li,

    * 判断li的的文本值是否是删除,

    * 是的话添加点击事件

    */

    //获取对象id

    varinputTxt=document.getElementsByTagName("input");

    varbox=document.getElementById("box");

    varapp=document.getElementById("app");

    vardelF=document.getElementById("delF");

    vardelL=document.getElementById("delL");

    varupdate=document.getElementById("update");

    //添加事件

    app.onclick=function() {

    //创建ul标签

    varlist =document.createElement('ul');

    //判断inputTxt的值是否为空,为空的话弹出提示,有值的话继续执行添加

    if(inputTxt[0].value==''|| inputTxt[1].value==''|| inputTxt[2].value==''){

    alert('请输入有效元素');

    }else{

    //循环input标签

    for(vari =0;i < inputTxt.length;i++) {

    //创建li标签

    varlist_lis =document.createElement('li');

    //创建文本节点,

    varlist_txt =document.createTextNode(inputTxt[i].value);

    //把创建的文本节点,放入li里

    list_lis.appendChild(list_txt);

    //把创建li标签放入ul标签里

    list.appendChild(list_lis);

    // 把创建ul标签放入id为box的div里

    box.appendChild(list);

    //                  console.log(inputTxt[i].value)

    }

    }

    //点击删除

    //获取box里的所有的li

    varLi=box.getElementsByTagName('li');

    //循环遍历li

    for(vari=0;i

    //判断li的的文本值是否是删除

    if(Li[i].innerText=='删除'){

    //是的话添加点击事件

    Li[i].onclick=function() {

    box.removeChild(this.parentNode);

    }

    }

    相关文章

      网友评论

          本文标题:HTML DOM增加删删除操作

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