<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>用javascript实现html元素的增删查改</title>
<script type="text/javascript"><!--
function $(nodeId) {
return document.getElementById(nodeId);
}
function $Name(tagName) {
return document.getElementsByTagName(tagName);
}
//1. 替换标签
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); //直接替换了标签
}
//2. 删除标签
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里面的任何元素
}
//3. 前面添加标签
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); //在目标标签前面添加元素
}
//4. 后面添加标签
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的最后添加元素
}
// --></script>
</head>
<body>
<p id="p1">Hello World!
<input type="button" value="替换内容" onclick="replaceMsg();" />
<p id="p2">我可以被删除!
<input type="button" id="remove" value="删除它" onclick="removeMsg();" />
<p id="p3">在我上下添加一个元素吧!
<input type="button" id="addbefore" value="前面添加" onclick="addbefore();" />
<input type="button" id="addlast" value="后面添加" onclick="addlast();" />
用javascript实现html元素的增删查改[xyytit]的相关教程结束。