/**
* 思路:
* 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);
}
}
网友评论