<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.lis ul li{
20px;
height: 20px;
background: #ff0000;
color: #fff;
float: left;
list-style: none;
text-align: center;
line-height: 20px;
margin-right: 20px;
}
</style>
</head>
<body>
<input type="text" style="outline: none" );
return false;
}else{
//符合条件的如果li的个数大于0说明有存在li,那么把li插入到lis的第一个子元素前面
if(lis.getElementsByTagName('li').length > 0) {
//获取lis的li
var newLi = lis.getElementsByTagName('li');
console.log(newLi);
lis.appendChild(li);
li.innerHTML = num.value;
//插入到li的最后一项的后面
lis.insertBefore(li, newLi.lastChild.nextSibling);
console.log(lis.childNodes);
}else{
//否则没有li的个数的时候给li赋值
lis.appendChild(li);
li.innerHTML = num.value;
}
return true;
}
};
leftC.onclick = function() {
var li = document.createElement('li');
//符合条件的如果li的个数大于0说明有存在li,那么把li移除
if(lis.getElementsByTagName('li').length > 0) {
//获取lis的第一个li
var newLi = lis.getElementsByTagName('li')[0];
lis.removeChild(newLi);
}else{
alert('没有要移除的项');
}
};
rightC.onclick = function() {
var li = document.createElement('li');
//符合条件的如果li的个数大于0说明有存在li,那么把li移除
if(lis.getElementsByTagName('li').length > 0) {
//获取lis的最后一个li
var newLi = lis.lastChild;
lis.removeChild(newLi);
}else{
alert('没有要移除的项');
}
}
}
</script>
</body>
</html>
