<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebDom4.aspx.cs" Inherits="DOM复习.WebDom4" %>
<!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 runat="server">
<script type="text/javascript">
//添加节点
function createnode() {
//创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中。
var nd = document.createDocumentFragment();
//创建一个标签节点
var pnode = document.createElement('p');
//节点中的文本内容
var tnode = document.createTextNode('添加的节点');
//把文本内容添加到标签中
pnode.appendChild(tnode);
//把节点及内容添加到文档碎片中
nd.appendChild(pnode);
//把文档碎片添加到Document中。
document.body.appendChild(nd);
//完成添加节点操作
}
function editnode() {
var pnode = document.createElement('p');
var tnode = document.createTextNode('完成的替换');
pnode.appendChild(tnode);
//获取索引值为‘1’的<p>标签的信息，把值给oldnode
var oldnode = document.getElementsByTagName('p')[1];
//使用新值tnode替换掉oldnode中的内容
oldnode.parentNode.childNodes[1].replaceNode(pnode, oldnode);
}
function removenode() {
//获取索引值为‘0’的<p>标签的信息
var oldnode = document.getElementsByTagName('p')[0];
//移除索引值为‘0’的<p>标签
oldnode.parentNode.removeChild(oldnode);
}
function createbeforenode() {
var pnode = document.createElement('p');
var tnode = document.createTextNode('在某节点之前添加的节点');
pnode.appendChild(tnode);
//获取索引值为‘0’的<p>标签的信息
var oldnode = document.getElementsByTagName('p')[0];
//在索引值为‘0’的<p>标签之前添加节点
oldnode.parentNode.insertBefore(pnode);
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>
Hello World!</p>
</div>
<input type="button" value="添加节点" onclick="createnode() " />
<input type="button" value="替换节点" onclick="editnode() " />
<input type="button" value="删除节点" onclick="removenode() " />
<input type="button" value="在之前添加节点" onclick="createbeforenode() " />
</form>
</body>
</html>