dom 节点操作2
<!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>
<title>20120430dom创建并插入节点.htm</title>
<script type="text/javascript"> //创建节点主要包括创建element text attribute
//=================================================================================
//在节点后插入文本 追加的节点
function testApplendChild() {
var divNode = document.createElement("div");
var textNode = document.createTextNode("dom很强大！！");
divNode.appendChild(textNode);
document.body.appendChild(divNode);
}
//=================================================================================
//在节点前插入文本
function testInsertBefore() {
var divNode = document.createElement("div");
var textNode = document.createTextNode("dom很强大！！Q");
var tagNode = document.getElementById("btn2");
divNode.insertBefore(textNode,null);
document.body.insertBefore(divNode,tagNode);
}
//=================================================================================
//插入文本
function testDocumentFragment() {
var newFragmeng = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
var divNode = document.createElement("div");
var textNode = document.createTextNode("dom很有用");
divNode.appendChild(textNode);
newFragmeng.appendChild(divNode);
}
document.body.appendChild(newFragmeng);
}
//=================================================================================
//插入文本代码
function testInnerHTML() {
// var myNode = document.getElementById("p1");
// try { document.getElementById("p1").innerHTML = "<div>新疆</div>"; }
// catch (e)
// { document.write(e.Description); }
var myNode = document.getElementById("div1");
var strHtml="<table border='1' bordercolor='#000000'><tr>";
strHtml += "<td bgcolor='#99ccff' width='200' height='30'>innerHTML很好用</td>";
strHtml += "<td bgcolor='#99ccff' width='200' height='30'>innerHTML很好用</td>";
strHtml += "</tr></tr>";
strHtml += "<td bgcolor='#99ccff'>innerHTML很好用</td>";
strHtml += "<td bgcolor='#99ccff'>innerHTML很好用</td>";
strHtml += "</tr></table>";
myNode.innerHTML=strHtml;
}
//=================================================================================
//复制节点 参数为ture的话 会把所有的节点复制 借助一个节点附加
function testCloneNode() {
for (var i = 2; i <= 20; i++) {
var myNode = document.getElementById("div1");
var newNode = myNode.cloneNode(false);
newNode.setAttribute("id", "p" + i);
newNode.setAttribute("onclick", "");
document.body.appendChild(newNode);
}
}
//=================================================================================
//下面为替换子节点代码
function testReplace() {
var divNode = document.createElement("div");
// var newAttribute = document.createAttribute("name");//属性节点
var textNode = document.createTextNode("第一次替换");
divNode.appendChild(textNode);
divNode.setAttribute("id", "nameStl");
var oldNode = document.getElementById("p2");
if (oldNode != null) {
document.body.replaceChild(divNode, oldNode);
}
}
//=================================================================================
//下面为替换子节点代码2
//替换上面替换字符串的子串
function testReplace2() {
var targetNode = document.getElementById("nameStl");
if (targetNode != null) {
targetNode.childNodes[0].replaceData(0, 2, "第二次替换");
}
}
function testRemove() {
var delNode = document.getElementById("p2");
document.body.removeChild(delNode);
}
</script>
</head>
<body>
<h1>第二章关于dom</h1><div id="div1">
<p id="p1">测试</p></div>
<p id="p2">测试</p>
<input id="btn" type="button" onclick="testApplendChild()" value="测试"/>
<input id="btn2" type="button" onclick="testInsertBefore()" value="测试1"/>
<input id="Button1" type="button" onclick="testDocumentFragment()" value="测试3"/>
<input id="btnCloneNode" type="button" onclick="testCloneNode()" value="测试clone"/>
<div id="div2"></div>
<input id="buttondd" type="button" onclick="testInnerHTML()" value="InnerHtml测试"/>
<input id="replaceBtn" type="button" onclick="testReplace()" value="替换文本测试"/>
<input id="Button2" type="button" onclick="testReplace2()" value="替换文本测试2"/>
<input id="Button3" type="button" onclick="testRemove()" value="删除文本节点测试"/>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>20120430dom创建并插入节点.htm</title>
<script type="text/javascript"> //创建节点主要包括创建element text attribute
//=================================================================================
//在节点后插入文本 追加的节点
function testApplendChild() {
var divNode = document.createElement("div");
var textNode = document.createTextNode("dom很强大！！");
divNode.appendChild(textNode);
document.body.appendChild(divNode);
}
//=================================================================================
//在节点前插入文本
function testInsertBefore() {
var divNode = document.createElement("div");
var textNode = document.createTextNode("dom很强大！！Q");
var tagNode = document.getElementById("btn2");
divNode.insertBefore(textNode,null);
document.body.insertBefore(divNode,tagNode);
}
//=================================================================================
//插入文本
function testDocumentFragment() {
var newFragmeng = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
var divNode = document.createElement("div");
var textNode = document.createTextNode("dom很有用");
divNode.appendChild(textNode);
newFragmeng.appendChild(divNode);
}
document.body.appendChild(newFragmeng);
}
//=================================================================================
//插入文本代码
function testInnerHTML() {
// var myNode = document.getElementById("p1");
// try { document.getElementById("p1").innerHTML = "<div>新疆</div>"; }
// catch (e)
// { document.write(e.Description); }
var myNode = document.getElementById("div1");
var strHtml="<table border='1' bordercolor='#000000'><tr>";
strHtml += "<td bgcolor='#99ccff' width='200' height='30'>innerHTML很好用</td>";
strHtml += "<td bgcolor='#99ccff' width='200' height='30'>innerHTML很好用</td>";
strHtml += "</tr></tr>";
strHtml += "<td bgcolor='#99ccff'>innerHTML很好用</td>";
strHtml += "<td bgcolor='#99ccff'>innerHTML很好用</td>";
strHtml += "</tr></table>";
myNode.innerHTML=strHtml;
}
//=================================================================================
//复制节点 参数为ture的话 会把所有的节点复制 借助一个节点附加
function testCloneNode() {
for (var i = 2; i <= 20; i++) {
var myNode = document.getElementById("div1");
var newNode = myNode.cloneNode(false);
newNode.setAttribute("id", "p" + i);
newNode.setAttribute("onclick", "");
document.body.appendChild(newNode);
}
}
//=================================================================================
//下面为替换子节点代码
function testReplace() {
var divNode = document.createElement("div");
// var newAttribute = document.createAttribute("name");//属性节点
var textNode = document.createTextNode("第一次替换");
divNode.appendChild(textNode);
divNode.setAttribute("id", "nameStl");
var oldNode = document.getElementById("p2");
if (oldNode != null) {
document.body.replaceChild(divNode, oldNode);
}
}
//=================================================================================
//下面为替换子节点代码2
//替换上面替换字符串的子串
function testReplace2() {
var targetNode = document.getElementById("nameStl");
if (targetNode != null) {
targetNode.childNodes[0].replaceData(0, 2, "第二次替换");
}
}
function testRemove() {
var delNode = document.getElementById("p2");
document.body.removeChild(delNode);
}
</script>
</head>
<body>
<h1>第二章关于dom</h1><div id="div1">
<p id="p1">测试</p></div>
<p id="p2">测试</p>
<input id="btn" type="button" onclick="testApplendChild()" value="测试"/>
<input id="btn2" type="button" onclick="testInsertBefore()" value="测试1"/>
<input id="Button1" type="button" onclick="testDocumentFragment()" value="测试3"/>
<input id="btnCloneNode" type="button" onclick="testCloneNode()" value="测试clone"/>
<div id="div2"></div>
<input id="buttondd" type="button" onclick="testInnerHTML()" value="InnerHtml测试"/>
<input id="replaceBtn" type="button" onclick="testReplace()" value="替换文本测试"/>
<input id="Button2" type="button" onclick="testReplace2()" value="替换文本测试2"/>
<input id="Button3" type="button" onclick="testRemove()" value="删除文本节点测试"/>
</body>
</html>
