JS增添删除元素
日期：2014-05-16 浏览次数：20424 次
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<arrayMsg.length ;i++ )
{
&n
<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<arrayMsg.length ;i++ )
{
&n
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
