HTML DOM增加删删除操作

/**

* 思路:

* 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);

}

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 下面是水平和垂直居中的方法: 1.Flex 方案 2.Grid 方案 3.absolute + transform...
    李奕锦liyijin阅读 580评论 0 2
  • 1.dom对象的innerText和innerHTML有什么区别? innerText是一个可写属性。将写入的内容...
    candy252324阅读 564评论 0 0
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,816评论 0 8
  • 在 JavaScript 中的等性判断符号有以下两组 == 和 != === 和 !== 在进行 == 或 != ...
    scropion阅读 224评论 0 1
  • 本以为这是一本刻苦铭心的书,但很可惜,这不是。这仅是一本畅销书,一本借着皮囊的外衣把自己包装得很骨感很冰冷的...
    NiceParis阅读 1,368评论 8 5