push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。此方法可把它的参数顺序添加到s arrayObject 的尾部。它直接修改 arrayObject.
splice() 方法用于插入、删除或替换数组的元素。此方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。返回的是被删除的元素的数组。 既是可直接更改数组，可以对数组的任何位置插入删除元素。
下面是个实例，实现两个功能，一：添加好友分组，二：点击任意的好友即可删除该好友。
1.首先建好框架
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>数组</title>
<style type="text/css">
body{ font-size: 12px; }
body, div, dl, dt, dd { margin: 0;}
li{ list-style: none; }
#button { width: 960px; height: 40px; margin: 0 auto; padding-top: 15px; }
.wrap { width: 960px; margin: 0 auto; }
.list dt { heihgt: 26px; font-size: 13px; font-weight: bold; line-height: 26px; }
.list dd { display:none;}
</style>
</head>
<body>
<div id = "button">
<input type = "button" id="btn1" value="添加数据"/>
<input type = "button" id="btn2" value="添加好友分组"/>
</div>
<div class="wrap" id="box">
</div>
</body>
</html>然后就是js 文件了。 这里我们首先定义两个数组 一个是分组数组 group ， 一个是成员数组 member， 这两个数组是相对应的，因此member是一个二维数组， 然后对数组添加新的元素 或者删除元素 每次的添加和删除后都要清空一下，重新创建数组，从而得到才得到添加/删除后新的数组。
View Code
var tag = "";
var group = ["在线好友","我的好友","高中好友","大学好友"];
var member = [["梦无语","喜洋洋", "漠雪寒霜", "小石头"],["美羊羊","懒洋洋","千代"],["冰块","醉翁","花太香"],["繁世华灯","遗憾","叶子"]];
function createArray() {
var id ="";
for (var i = 0; i < group.length; i++) {
id = "dt"+i;
tag += "<dt id="+id+">" + group[i] + "</dt><dd><ul>";
if(i<member.length)
{
var temp = "";
for (var j = 0; j < member[i].length; j++) {
temp = "li" + i + j;
tag += "<li id = "+temp+">" + member[i][j] + "</li>";
}
}
tag += "</ul></dd>";
}
tag = "<dl id='dlist'>" + tag + "</dl>";
var box = document.getElementById("box");
box.innerHTML = tag;
addClick(); //添加分组里的好友成员
removeClick();//删除
}
function addGroup() {
var btn2 = document.getElementById("btn2");
btn2.onclick = function () {
tag="";//清空
var name = window.prompt("please enter your groupname", "");
if(name == "" || name == null){
name ="新添分组";
} else if(name == null) {
return false;
}
group.push(name); //添加元素到数组的末尾
createArray(); //重新创建数组
addClick(); //调用 添加好友的函数
};
}
function addClick() {
//添加分组里的好友成员
for (var i = 0; i < group.length; i++) {
if (i < member.length) {
var newMember = new Array();
member.push(newMember);
}
clickEve(i);
}
}
//解决上面的闭包问题。
function clickEve(n) {
var dtId = document.getElementById("dt"+n);
dtId.onclick = function() {
var memberName = window.prompt("please write your firend's names", "");
if (memberName == "") {
memberName = "新的好友";
} else if(memberName == null) {
return false;
}
member[n].push(memberName);
tag = ""; //重新创建之前都要 清空
createArray();
}
}
function removeClick() {
for (var i = 0; i < group.length; i++) {
if( i < member.length) {
pro(i);
}
}
}
function pro(m) {
for(var j = 0; j < member[m].length; j++) {
removeEle(m, j);
}
}
function removeEle(m, n) {
var liId = document.getElementById("li" + m + n);
liId.onclick = function() {
member[m].splice(n, 1); //删除
tag = "";
createArray(); //重新创建一次。
}
}
window.onload = function() {
var btn = document.getElementById("btn1");
btn.onclick = function() {
createArray();
}
addGroup();//添加分组
}具体效果就要自己亲自动手 实验下了。这里不多说了，其中我做的过程中，遇到了几点问题，我是个初学者，所以每次总是犯这几点错误。
第一： 每次添加元素后，alert 一下该数组，都可以读取到数组的元素，然后在页面中没有看到新添的元素，没想到去重新创建面板列表来读取元素，这里push方法返回的新的长度，所以，每次添加的时候都要再创建一次列表 来重新读取数组的元素。
第二： 在添加click事件时，我直接是用group[i].onclick = function（） {} 谁知道没反应，怎么测试都没反应，最后我的理解是数组里的元素是字符串，所以不能用onclick事件。 所以只好分组每个都加个id,我是个初学者，知识面狭窄，如果你有更好的方法，可以给我提下你的宝贵意见。
第三：没加判断，如果新添加分组 “在线好友”， 我想要 在里面再添加几个 好友，这时 会出现member[i] undefined 错误，最后分析了好久才知道，二维数组里的元素本来就是个数组， 想在里面添加新的元素，必须先创建一个数组，然后在添加元素，
function addClick() {
//添加分组里的好友成员
for (var i = 0; i < group.length; i++) {
if (i < member.length) {
var newMember = new Array(); //新建个数组对象，然后 添加到 member二维数组里。
member.push(newMember);
}
clickEve(i);
}
}第四： 删除这块，还有其他方法，关于splice 和slice的 两个的用法， 我更喜欢splice的用法、或许是因为它可以直接对数组进行更改的原因吧。。。
