资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
JS 添加删除元素的实现代码
<html> <head> <title>JS添加删除元素</title> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%3C!--%20%0D%0A%0D%0Afunction%20%24(nodeId)%20%0D%0A%7B%20%0D%0Areturn%20document.getElementById(nodeId)%3B%20%0D%0A%7D%20%0D%0Afunction%20%24Name(tagName)%20%0D%0A%7B%20%0D%0Areturn%20document.getElementsByTagName(tagName)%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20replaceMsg()%20%0D%0A%7B%20%0D%0Avar%20newNode%20%3D%20document.createElement(%22P%22)%3B%2F%2F%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AAP%E6%A0%87%E7%AD%BE%20%0D%0AnewNode.innerHTML%20%3D%20%22%3Cfont%20color%3D'red'%3E%E6%9B%BF%E6%8D%A2%E5%90%8E%E7%9A%84%E6%96%87%E5%AD%97%3C%2Ffont%3E%22%3B%20%0D%0Avar%20oldNode%20%3D%20%24Name(%22P%22)%5B0%5D%3B%2F%2F%E8%8E%B7%E5%8F%96body%E9%87%8C%E9%9D%A2%E7%AC%AC%E4%B8%80%E4%B8%AAp%E5%85%83%E7%B4%A0%20%0D%0AoldNode.parentNode.replaceChild(newNode%2ColdNode)%3B%2F%2F%E7%9B%B4%E6%8E%A5%E6%9B%BF%E6%8D%A2%E4%BA%86%E6%A0%87%E7%AD%BE%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20removeMsg()%20%0D%0A%7B%20%0D%0Avar%20node%20%3D%20%24(%22p2%22)%3B%2F%2Fp%E6%A0%87%E7%AD%BE%20%0D%0Avar%20nodeBtn%20%3D%20%24(%22remove%22)%3B%2F%2F%E6%8C%89%E9%92%AE%20%0D%0A%2F%2Fnode.parentNode.removeChild(node)%3B%20%2F%2F%E4%B8%8B%E9%9D%A2%E6%95%88%E6%9E%9C%E7%9B%B8%E5%90%8C%20%0D%0Adocument.body.removeChild(node)%3B%2F%2F%E5%9C%A8body%E4%B8%AD%E5%88%A0%E9%99%A4id%E4%B8%BAP2%E7%9A%84%E5%85%83%E7%B4%A0%20%0D%0A%2F%2FnodeBtn.parentNode.removeChild(nodeBtn)%3B%2F%2F%E5%88%A0%E9%99%A4%E8%AF%A5%E6%8C%89%E9%92%AE%20%0D%0Adocument.body.removeChild(nodeBtn)%3B%20%0D%0A%2F%2Fdocument.body.removeNode()%3B%E6%89%A7%E8%A1%8C%E8%BF%99%E6%9D%A1%E8%AF%AD%E5%8F%A5%E5%B0%86%E6%B8%85%E7%A9%BAbody%E9%87%8C%E9%9D%A2%E7%9A%84%E4%BB%BB%E4%BD%95%E5%85%83%E7%B4%A0%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20addbefore()%20%0D%0A%7B%20%0D%0Avar%20newNode%20%3D%20document.createElement(%22p%22)%3B%2F%2F%E5%88%9B%E5%BB%BAP%E6%A0%87%E7%AD%BE%20%0D%0A%2F%2Fvar%20newText%20%3D%20document.createTextNode(%22%E5%89%8D%E9%9D%A2%E6%B7%BB%E5%8A%A0%E7%9A%84%E5%85%83%E7%B4%A0%22)%3B%20%0D%0A%2F%2FnewNode.appendChild(newText)%3B%2F%2F%E4%B8%8E%E4%B8%8B%E9%9D%A2%E6%95%88%E6%9E%9C%E4%B8%80%E6%A0%B7%20%0D%0AnewNode.innerHTML%20%3D%20%22%3Cfont%20color%3D'red'%3E%E5%89%8D%E9%9D%A2%E6%B7%BB%E5%8A%A0%E7%9A%84%E5%85%83%E7%B4%A0%3C%2Ffont%3E%22%3B%2F%2F%E4%B9%A6%E5%86%99P%E6%A0%87%E7%AD%BE%E9%87%8C%E9%9D%A2%E7%9A%84%E5%86%85%E5%AE%B9%20%0D%0Avar%20oldNode%20%3D%20%24(%22p3%22)%3B%2F%2F%E7%9B%AE%E6%A0%87%E6%A0%87%E7%AD%BE%20%0D%0A%2F%2Fdocument.body.insertBefore(newNode%2ColdNode)%3B%20%0D%0AoldNode.parentNode.insertBefore(newNode%2ColdNode)%3B%2F%2F%E5%9C%A8%E7%9B%AE%E6%A0%87%E6%A0%87%E7%AD%BE%E5%89%8D%E9%9D%A2%E6%B7%BB%E5%8A%A0%E5%85%83%E7%B4%A0%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20addlast()%20%0D%0A%7B%20%0D%0Avar%20newNode%20%3D%20document.createElement(%22p%22)%3B%2F%2F%E5%88%9B%E5%BB%BAP%E6%A0%87%E7%AD%BE%20%0D%0A%2F%2Fvar%20newText%20%3D%20document.createTextNode(%22%E5%90%8E%E9%9D%A2%E6%B7%BB%E5%8A%A0%E7%9A%84%E5%85%83%E7%B4%A0%22)%3B%20%0D%0A%2F%2FnewNode.appendChild(newText)%3B%2F%2F%E4%B8%8E%E4%B8%8B%E9%9D%A2%E6%95%88%E6%9E%9C%E4%B8%80%E6%A0%B7%20%0D%0AnewNode.innerHTML%20%3D%20%22%3Cfont%20color%3D'red'%3E%E5%90%8E%E9%9D%A2%E6%B7%BB%E5%8A%A0%E7%9A%84%E5%85%83%E7%B4%A0%3C%2Ffont%3E%22%3B%20%0D%0Avar%20oldNode%20%3D%20%24(%22p3%22)%3B%20%0D%0A%0D%0AoldNode.appendChild(newNode)%3B%20%0D%0A%2F%2Fdocument.body.appendChild(newNode)%3B%2F%2F%E5%A6%82%E6%9E%9C%E4%BD%BF%E7%94%A8%E8%AF%A5%E6%96%B9%E6%B3%95%2C%E5%88%99%E5%9C%A8body%E7%9A%84%E6%9C%80%E5%90%8E%E6%B7%BB%E5%8A%A0%E5%85%83%E7%B4%A0%20%0D%0A%7D%20%0D%0A%0D%0Awindow.onload%20%3D%20function%20addArrayMsg()%20%0D%0A%7B%20%0D%0Avar%20arrayMsg%20%3D%20%5B'one'%2C'two'%2C'three'%2C'four'%2C'five'%5D%3B%2F%2F%E5%88%9B%E5%BB%BA%E6%95%B0%E7%BB%84%20%0D%0Avar%20fragment%20%3D%20document.createDocumentFragment()%3B%2F%2F%E5%88%9B%E5%BB%BA%E6%96%87%E6%A1%A3%E7%89%87%E6%AE%B5%20%0D%0Avar%20newNode%20%3B%20%0D%0Afor%20(var%20i%3D0%20%3Bi%3CarrayMsg.length%20%3Bi%2B%2B%20)%20%0D%0A%7B%20%0D%0AnewNode%20%3D%20document.createElement(%22P%22)%3B%2F%2F%E5%88%9B%E5%BB%BAP%E6%A0%87%E7%AD%BE%20%0D%0Avar%20nodeText%20%3D%20document.createTextNode(arrayMsg%5Bi%5D)%3B%2F%2F%E5%88%9B%E5%BB%BA%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE%2Cvalue%E4%B8%BA%E6%95%B0%E7%BB%84%E9%87%8C%E9%9D%A2%E7%9A%84%E5%80%BC%20%0D%0AnewNode.appendChild(nodeText)%3B%2F%2F%20%0D%0Afragment.appendChild(newNode)%3B%2F%2F%E6%8A%8AP%E6%A0%87%E7%AD%BE%E8%BF%BD%E5%8A%A0%E5%88%B0fragment%E9%87%8C%E9%9D%A2%20%0D%0A%7D%20%0D%0Adocument.body.appendChild(fragment)%3B%2F%2F%E6%8A%8Afragment%E8%BF%BD%E5%8A%A0%E5%88%B0body%E9%87%8C%E9%9D%A2%20%0D%0A%7D%20%0D%0A%0D%0A%0D%0A%0D%0Afunction%20addRow()%20%0D%0A%7B%20%0D%0Avar%20tab%20%3D%20%24(%22myTable%22)%3B%20%0D%0A%2F%2Ftab.createCaption().innerHTML%3D%22%3Cfont%20color%3D'red'%3E%E6%88%91%E7%9A%84%E8%A1%A8%E6%A0%BC%3C%2Ffont%3E%22%3B%20%0D%0Avar%20oldTr%20%3D%20%24(%22handleTr%22)%3B%20%0D%0Avar%20newTr%20%3D%20tab.insertRow()%3B%2F%2F%E5%88%9B%E5%BB%BA%E4%B8%80%E8%A1%8C%20%0D%0Avar%20newTd1%20%3D%20newTr.insertCell()%3B%2F%2F%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%8D%95%E5%85%83%E6%A0%BC%20%0D%0Avar%20newTd2%20%3D%20newTr.insertCell()%3B%2F%2F%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%8D%95%E5%85%83%E6%A0%BC%20%0D%0AnewTd1.innerHTML%20%3D%20%22%3Cinput%20type%3D'checkbox'%20%2F%3E%22%3B%20%0D%0AnewTd2.innerHTML%20%3D%20%22%3Cinput%20type%3D'text'%20%2F%3E%22%3B%20%0D%0A%0D%0A%7D%20%0D%0A%0D%0Afunction%20removeRow()%20%0D%0A%7B%20%0D%0Avar%20tab%20%3D%20%24(%22myTable%22)%3B%20%0D%0A%2F%2F%20if(tab.rows.length%3E0)%7B%20%0D%0A%2F%2F%20tab.deleteRow()%3B%20%0D%0A%2F%2F%20if(tab.rows.length%3D%3D1)%20%0D%0A%2F%2F%20tab.deleteCaption()%3B%20%0D%0A%2F%2F%20%7D%20%0D%0A%0D%0Avar%20cbbox%20%3B%20%0D%0Afor(var%20i%3D0%3Bi%3Ctab.rows.length%3Bi%2B%2B)%7B%20%0D%0Acbbox%20%3D%20tab.rows%5Bi%5D.childNodes%5B0%5D.childNodes%5B0%5D%3B%2F%2F%E8%8E%B7%E5%8F%96input%E5%85%83%E7%B4%A0%20%0D%0Aif(cbbox.checked)%7B%20%0D%0A%0D%0Atab.deleteRow(i--)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%E5%85%A8%E9%80%89%20%0D%0Afunction%20selAll(value)%7B%20%0D%0Avar%20items%20%3D%20document.all.tags(%22input%22)%3B%2F%2F%E8%8E%B7%E5%8F%96%E9%A1%B5%E9%9D%A2%E4%B8%8A%E6%89%80%E6%9C%89%E7%9A%84input%E5%85%83%E7%B4%A0%20%0D%0Afor(var%20i%20%3D%200%3Bi%3Citems.length%3Bi%2B%2B)%7B%20%0D%0Aif(items%5Bi%5D.type%3D%3D%22checkbox%22)%7B%2F%2F%E5%88%A4%E6%96%AD%E7%B1%BB%E5%9E%8B%E6%98%AF%E5%90%A6%E4%B8%BAcheckbox%20%0D%0Aitems%5Bi%5D.checked%20%3D%20value.checked%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20getInputValue()%20%0D%0A%7B%20%0D%0Avar%20inputArray%20%3D%20new%20Array()%3B%2F%2F%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%95%B0%E7%BB%84%20%0D%0Avar%20tab%20%3D%20%24(%22myTable%22)%3B%20%0D%0Avar%20tbInput%3B%20%0D%0Afor(var%20i%3D0%3Bi%3Ctab.rows.length%3Bi%2B%2B)%7B%20%0D%0AtbInput%20%3D%20tab.rows%5Bi%5D.childNodes%5B1%5D.childNodes%5B0%5D.value%3B%20%0D%0Aif(tbInput!%3D%22%22%26%26tbInput!%3Dnull)%20%0D%0AinputArray.push(tbInput)%3B%20%0D%0A%7D%20%0D%0AinputArray%20%3D%20inputArray.join(%22*%5E%26%22)%3B%2F%2F%E9%BB%98%E8%AE%A4%E4%BB%A5%22%2C%22%E5%8F%B7%E8%BF%9E%E6%8E%A5%20%0D%0A%24(%22showValue%22).value%20%3D%20inputArray%3B%20%0D%0A%7D%20%0D%0Avar%20x%20%3D'10%2B20'%3B%20%0D%0A(%22alert(x)%3B%22)%20%0D%0A%2F%2F%20--%3E%3C%2Fscript%3E"> </head> <body> <p id="p1">Hello World!</p> <input type="button" value="替换内容" onclick="replaceMsg();" /> <p id="p2">我可以被删除!</p> <input type="button" id="remove" value="删除它" onclick="removeMsg();" /> <p id="p3">在我上下添加一个元素吧！</p> <input type="button" id="addbefore" value="前面添加" onclick="addbefore();" /> <input type="button" id="addlast" value="后面添加" onclick="addlast();" /> <p></p> <div style="border:1px solid blue;height:300px"> <table id="myTable" cellpadding="0" cellspacing="0" border="1px solid blue" style="padding:4px;" style="padding:4px;"> </table> <input type="checkbox" onclick="selAll(this);" /> <input type="button" value="添加一行" id="addRow" onclick="addRow();" /> <input type="button" value="删除一行" id="removeRow" onclick="removeRow();" /> <textarea rows="5" cols="25" id="showValue" />
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程