软件开发培训班 >> 编程开发 >> JavaScript

JS 添加删除元素的实现代码

　　本文标签：JS,添加删除

<html> 
<head> 
<title>JS添加删除元素</title> 
<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我的表格</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);") 
// --></script> 
</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><div class="tj_content hidden-xs"><table width=600 border=0 cellspacing=0 cellpadding=2 align=center class=title14><tr align=center><td><a href="http://www.zhujiangroad.com/web/news/2020/7m81891.html"  target=_blank > 电商平台是否有权打假？法院：惩罚性违约金应受保护 </a></td><td><a href="http://www.zhujiangroad.com/edu/soft/68809.html"  target=_blank > 怎么加快win7开机速度 </a></td></tr> <tr align=center><td><a href="http://www.zhujiangroad.com/dc/news/2022/11a17716.html"  target=_blank > 避开“慢门摄影”的 6 个误区 </a></td><td><a href="http://www.zhujiangroad.com/dc/news/2022/7a17660.html"  target=_blank > 佳能EOS R10评测：超轻便高性能微单相机 </a></td></tr></table></div> 
<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();" />

技术文章快速查找

js 淘宝首页的拼音排序效果

基于JQuery实现CheckBox全选全不选

jQuery 技巧大全(新手入门篇)

javascript 获取select下拉列表值的代码

javascript dom代码应用简单的相册[firefox only]

JavaScript取得鼠标绝对位置程序代码介绍

JQuery 1.6发布性能提升，同时包含大量破坏性变更

javascript 动态生成私有变量访问器

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建