一、创建节点
document.createElement(Tag)，Tag必须是合法的HTML元素
二、DOM添加、删除节点的方法：
|
appendChild(newNode) |
将newNode添加成当前节点的最后一个子节点 |
|
insertBefore(newNode,refNode) |
将refNode节点之前插入newNode节点 |
|
replaceChild(newNode,oldNode) |
将oldNode节点替换成newNode节点 |
|
removeChild(oldNode) |
将oldNode子节点删除 |
例如：
<script type="text/javascript">
//replaceChild(newNode,oldNode) 将oldNode节点替换成newNode节点
function create1(){
//创建一个li节点
var li=document.createElement("li");
//自行添加文本属性等在
li.innerHTML="lalallala";
//获取ul元素
var city=document.getElementById("city");
//将li元素添加到ul元素上 li变量
city.appendChild(li);
}
/*添加到第一个节点*/
function create2(){
//创建li元素
var a=document.createElement("li");
a.innerHTML="你是谁";
//获取ul元素
var city=document.getElementById("city");
//获取要插入的位置的那个元素 适用通用的利用节点关系访问HTML元素。
var first=city.firstChild.nextSibling;
//插入元素，将定义的a插入到first之前
city.insertBefore(a,first);
}
function create(){
//创建li元素
var b=document.createElement("li");
b.innerHTML="山东";
//获取ul元素
var ul=document.getElementById("city");
//获取要替换的旧元素
var old=ul.lastChild.previousSibling;
//替换 将b替换到old位置后
ul.replaceChild(b,old);
}
/*复制节点*/
var count=0;
function copy(){
count++;
var ul=document.getElementById("city");
//获取city中的ul元素，变成全局变量，共享
if(count==1){
//获取你要复制的节点，ul中的最后一个节点
var old=ul.lastChild.previousSibling;
//复制节点 复制当前节点及后代节点 true真，false只复制本身
var li=old.cloneNode(true);
//将li元素添加到ul元素中
ul.appendChild(li);
}else{
//获取city中的ul元素
var ul=document.getElementById("city");
//获取你要复制的节点，ul中的最后一个节点
var old=ul.lastChild;
//复制节点 复制当前节点及后代节点
var li=old.cloneNode(true);
//在ul元素中添加li
ul.appendChild(li);
}
}
function del(){
//获取ul元素
var ul=document.getElementById("city");
//获取要删除的元素,ul中的最后一个元素
var old=ul.lastChild.previousSibling;
//ul中删除old
ul.removeChild(old);
}
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
</ul>
<input type="button" value="创建插入替换节点" onClick="create()">
<input type="button" value="复制节点" onClick="copy()">
<input type="button" value="删除节点" onClick="del()">
</body>
二、下拉菜单表单控件：
function create(){
//创建select元素
var select=document.createElement("select");
//id属性
select.id="city";
select.size=5;
//循环创建10个option元素并添加到select元素上
for(i=0;i<10;i++){
//创建option元素
var op=new Option("选项"+1,i);
//添加option元素到select上
select.options[i]=op;
}
//将select添加到body中，从第一个数组开始
var body=document.getElementsByTagName("body")[0];
// var body=document.getElementById("test");
//添加元素 添加节点到目前的最后一个节点
body.appendChild(select);
}
function del(){
var select1=document.getElementById("city");
//判断是否满足数组》0
if (select1.length>0)
{
//select1中的下拉列表的长度
select1.remove(select1.options.length-1);
}
}
function qk(){
var select=document.getElementById("city");
if(select.length>0){
select.options.length=null;
}
}
</script>
</head>
<body id="test">
<input type="button" value="创建一个城市列表框" onClick="create()">
<input type="button" value="一条条删除列表框的内容" onClick="del()">
<input type="button" value="一次性清空列表框内容" onClick="qk()">
</body>
重点：通过循环来逐个将option添加到select上面
三、表格的增删改查
<script type="text/javascript">
function create(){
//创建表格元素
var table=document.createElement("table");
table.id="mytable";
table.border="1px";
//创建五行 for循环=5 i=5
for(var i=0;i<5;i++){
var row=table.insertRow(i);
//每一行创建四列 每行四个列
for(var j=0;j<4;j++){
var cell=row.insertCell(j);
cell.innerHTML="第"+(i+1)+"行第"+(j+1)+"列";
}
}
//将table元素添加到body标签中
var body=document.getElementById("test");
body.appendChild(table);
}
function del(){
//获取table元素
var table=document.getElementById("mytable");
//判断表格中有行再删除
if(table.rows.length>0){
table.deleteRow(table.rows.length-1);
}
}
//表格的列cell是通过行来控制的，所以前面不能加table.row.cell，但行是通过table来控制，所以可以加table.rows，row是table的单个行，rows是返回该表格里的所有表格行(数组)，cell是单元格联合
function del1(){
//获取table元素
var table=document.getElementById("mytable");
//获取最后一行
var row=table.rows[table.rows.length-1];
if(row.cells.length>0){
//删除最后一列，删除行内单元格数组的最后一位
row.deleteCell(row.cells.length-1);
}
//如果最后一行所有列都没有了就删除最后一行
else{
tal.deleteRow(table.rows.length-1);
}
}
</script>
</head>
<body id="test">
<input type="button" value="创建一个5行4列的表格" onClick="create()">
<input type="button" value="删除最后一行" onClick="del()">
<input type="button" value="删除最后一个单元格" onClick="del1()">
</body>
表格与其不同的地方在于她要从行列开始创建，并且要记住是table.rows这是表格的全部行，这是row.deleteCell表格行里的单元格。不要弄混。
表格行的创建删除
|
insertRow(index) |
在指定索引位置插入一行 |
|
createCaption() |
为该表格创建标题 |
|
deleteRow(index) |
删除表格中index索引处的行 |
给表格行创建、删除单元格的方法：
|
insertCell(index) |
在index处创建一个单元格，返回新创建的单元格 |
|
deleteCell(index) |
删除某行在index索引处的单元格 |
原文地址：https://www.cnblogs.com/a199706/p/11181481.html
时间： 2024-11-05 18:42:29