您当前的位置：飞诺网 >> 网页设计 >> Javascript >> Javascript系列教程
JS添加删除元素
www.diybl.com 时间 ： 2009-08-13 作者：匿名 编辑：toman 点击： [ 评论 ]
<html> <head> <title>JS添加删除元素</title> <mce:script type="text/javascript"><!-- function $(nodeId) { return document.getElementById(nodeId); } function $Name(tagName) { return document.getElementsByTagName(tagName); } function replaceMsg() { var newNode = document.createElement("P");//创建一个P标签 newNode.innerHTML = "<font color='red'>替换后的文字</font>"; var oldNode = $Name("P")[0];//获取body里面第一个p元素 oldNode.parentNode.replaceChild(newNode,oldNode);//直接替换了标签 } function removeMsg() { var node = $("p2");//p标签 var nodeBtn = $("remove");//按钮 //node.parentNode.removeChild(node); //下面效果相同 document.body.removeChild(node);//在body中删除id为P2的元素 //nodeBtn.parentNode.removeChild(nodeBtn);//删除该按钮 document.body.removeChild(nodeBtn); //document.body.removeNode();执行这条语句将清空body里面的任何元素 } function addbefore() { var newNode = document.createElement("p");//创建P标签 //var newText = document.createTextNode("前面添加的元素"); //newNode.appendChild(newText);//与下面效果一样 newNode.innerHTML = "<font color='red'>前面添加的元素</font>";//书写P标签里面的内容 var oldNode = $("p3");//目标标签 //document.body.insertBefore(newNode,oldNode); oldNode.parentNode.insertBefore(newNode,oldNode);//在目标标签前面添加元素 } function addlast() { var newNode = document.createElement("p");//创建P标签 //var newText = document.createTextNode("后面添加的元素"); //newNode.appendChild(newText);//与下面效果一样 newNode.innerHTML = "<font color='red'>后面添加的元素</font>"; var oldNode = $("p3"); oldNode.appendChild(newNode); //document.body.appendChild(newNode);//如果使用该方法,则在body的最后添加元素 } window.onload = function addArrayMsg() { var arrayMsg = ['one','two','three','four','five'];//创建数组 var fragment = document.createDocumentFragment();//创建文档片段 var newNode ; for (var i=0 ;i<arrayMsg.length ;i++ ) { newNode = document.createElement("P");//创建P标签 var nodeText = document.createTextNode(arrayMsg[i]);//创建文本标签,value为数组里面的值 newNode.appendChild(nodeText);// fragment.appendChild(newNode);//把P标签追加到fragment里面 } document.body.appendChild(fragment);//把fragment追加到body里面 } function addRow() { var tab = $("myTable"); //tab.createCaption().innerHTML="<font color='red'>我的表格</font>"; var oldTr = $("handleTr"); var newTr = tab.insertRow();//创建一行 var newTd1 = newTr.insertCell();//创建一个单元格 var newTd2 = newTr.insertCell();//创建一个单元格 newTd1.innerHTML = "<input type='checkbox' />"; newTd2.innerHTML = "<input type='text' />"; } function removeRow() { var tab = $("myTable"); // if(tab.rows.length>0){ // tab.deleteRow(); // if(tab.rows.length==1) // tab.deleteCaption(); // } var cbbox ; for(var i=0;i<tab.rows.length;i++){ cbbox = tab.rows[i].childNodes[0].childNodes[0];//获取input元素 if(cbbox.checked){ tab.deleteRow(i--); } } } //全选 function selAll(value){ var items = document.all.tags("input");//获取页面上所有的input元素 for(var i = 0;i<items.length;i++){ if(items[i].type=="checkbox"){//判断类型是否为checkbox items[i].checked = value.checked; } } } function getInputValue() { var inputArray = new Array();//创建一个数组 var tab = $("myTable"); var tbInput; for(var i=0;i<tab.rows.length;i++){ tbInput = tab.rows[i].childNodes[1].childNodes[0].value; if(tbInput!=""&&tbInput!=null) inputArray.push(tbInput); } inputArray = inputArray.join("*^&");//默认以","号连接 $("showValue").value = inputArray; } var x ='10+20'; ("alert(x);") // --></mce:script> </head> <body> <p id="p1">Hello World!</p> <input type="button" value="替换内容" onclick_fckprotectedatt="%20onclick%3D%22replaceMsg()%3B%22" /> <p id="p2">我可以被删除!</p> <input type="button" id="remove" value="删除它" onclick_fckprotectedatt="%20onclick%3D%22removeMsg()%3B%22" /> <p id="p3">在我上下添加一个元素吧！</p> <input type="button" id="addbefore" value="前面添加" onclick_fckprotectedatt="%20onclick%3D%22addbefore()%3B%22" /> <input type="button" id="addlast" value="后面添加" onclick_fckprotectedatt="%20onclick%3D%22addlast()%3B%22" /> <p></p> <div style="border:1px solid blue;height:300px"> <table id="myTable" cellpadding="0" cellspacing="0" border="1px solid blue" style="padding:4px;" mce_style="padding:4px;"> </table> <input type="checkbox" onclick_fckprotectedatt="%20onclick%3D%22selAll(this)%3B%22" /> <input type="button" value="添加一行" id="addRow" onclick_fckprotectedatt="%20onclick%3D%22addRow()%3B%22" /> <input type="button" value="删除一行" id="removeRow" onclick_fckprotectedatt="%20onclick%3D%22removeRow()%3B%22" /> <br> <textarea rows="5" cols="25" id="showValue" >
【文章投稿】【收藏此页】【飞诺社区】【发表评论】【关闭】
上一篇：ubuntu安装vnc4server
下一篇：ubuntu 安装使用ssh
文章评论
Javascript
FrontPage
Dreamweaver
html
css
网页制作技巧
网页特效
色彩原理
设计理念
web技术文档
JavaScript面向对象的支持--(1)
JavaScript极速狂飙：大容量字符型数组的快速检索
JavaScript对象与数组参考大全2
JavaScript教程--从入门到精通--(5)
Javascript代码混淆综合解决方案--(1)
JavaScript对象与数组参考大全1
ArcIMS学习之 HTML Viewer笔记：动态效果DHTML
JavaScript教程--从入门到精通--(3)
用javascript开发字典探测用户名或密码工具--(2)
JavaScript面向对象的支持--(5)
JavaScript教程--从入门到精通--(7)
ArcIMS学习之 HTML Viewer笔记：Servlet与请求响应过程
JBuilder2005实战JSP之特殊页面
JBuilder2005实战JSP之错误处理[多图]
javascript短路法
JBuilder2005实战JSP之创建数据库表
使用perl分析html文件（2）
Javascript实例教程(19) 使用HoTMetal(4)[多图]
JBuilder2005实战JSP之登录页面[多图]
javascript 不停(setInterval)/延时(setTimeout)函数
JBuilder2005实战JSP之登录…
JBuilder2005实战JSP之切换…
小技巧：用Javascript数组处理多个字符串的连接问题
JBuilder2005实战JSP之日志…
rails+extjs做的web桌面程序
Zend 系列产品(Zend Studio Server 、Zend Studio Client、Zend Optimizer和Zend Platform)的区别
JavaScript经典效果集锦（一）
动态ActionForm、struts上传文件、自定义ActionForm的类型转换、Struts对ActionForm的自动搜集流程
【JS】兼容ff的加入收藏和设为首页
javascript 把对象或数组转回json格式
js访问xml之创建xmlDocument
JSP+JavaBean+Servlet实现分页
发现造成java.sql.SQLException: No suitable driver found for proxool.test的原因
Mozilla Rhino:使用java语言来解释和执行javascript脚本
