JavaScript复习第二天元素节点的增删操作

我想说:能写出这么无聊的东西的世界不超过三个人~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script> //获取输入框内的值 function getValue(){ //如果已经存在的话,就清空列表 if(document.getElementsByClassName("test").length>0){ child = document.getElementsByClassName("test"); child[0].parentNode.removeChild(child[0]); } var count = document.getElementById('valueCount'); if(isNaN(count.value)==true){ alert('请输入正整数'); }else if(count.value<=0 || count.value>=50){ alert('请输入1-50之间的数量啦~'); }else{ addListAll(count.value); } } //批量添加元素节点操作 function addListAll(num){ //准备一个ul节点,将创建好li节点添加到其父节点 var ul = document.createElement('ul'); //为ul添加一个class ul.className="test"; for(i = 1; i<=num; i++){ //1.创建文本节点 var txt = document.createTextNode(i); //2.创建li节点,并添加class var li = document.createElement('li'); li.className="list2"; //3.将文本节点添加到li节点 li.appendChild(txt); //4.将li加入到父节点中 ul.appendChild(li); } //5.将ul降入到父节点中(body). document.body.appendChild(ul); //6.将操作按钮显示 document.getElementsByClassName("hiddenButton")[0].type = "button"; document.getElementsByClassName("hiddenButton")[1].type = "button"; } //增加元素节点操作 function addList(){ var liCount = document.getElementsByClassName('list2'); //1.创建文本节点 var txt = document.createTextNode(liCount.length+1); //2.创建li节点,并添加class var li = document.createElement('li'); li.className="list2"; //3.将文本节点添加到父节点 li.appendChild(txt); //4.将li节点加入到父节点 document.getElementsByClassName('test')[0].appendChild(li); } //删除元素节点操作 function delList(){ //1.找到要删除的元素节点 var li = document.getElementsByClassName('list2'); //2.精确定位到最后一个列表 var lastli = li[li.length-1]; if(li.length-1<0){ alert('不够删除的啦'); return; } //3.用父元素删除子元素节点 lastli.parentNode.removeChild(lastli); } </script>

</head>
<body>请输入1-50之间的列表数:
    <input type="text" name=" " id="valueCount" value = "10"/>
    <input type="button" value="确定生成" onclick = "getValue();"/><br /><br />

<input type="hidden" value="删除最后一个元素" onclick = "delList();" class = "hiddenButton"/>
<input type="hidden" value="添加最后一个元素" onclick = "addList();" class = "hiddenButton"/>

</body>
</html>

JavaScript复习第二天元素节点的增删操作_第1张图片

JavaScript复习第二天元素节点的增删操作_第2张图片

JavaScript复习第二天元素节点的增删操作_第3张图片

JavaScript复习第二天元素节点的增删操作_第4张图片

你可能感兴趣的:(JavaScript)