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" οnclick="testApplendChild()" value="測試"/>
<input id="btn2" type="button" οnclick="testInsertBefore()" value="測試1"/>
<input id="Button1" type="button" οnclick="testDocumentFragment()" value="測試3"/>
<input id="btnCloneNode" type="button" οnclick="testCloneNode()" value="測試clone"/>
<div id="div2"></div>
<input id="buttondd" type="button" οnclick="testInnerHTML()" value="InnerHtml測試"/>
<input id="replaceBtn" type="button" οnclick="testReplace()" value="替換文本測試"/>
<input id="Button2" type="button" οnclick="testReplace2()" value="替換文本測試2"/>
<input id="Button3" type="button" οnclick="testRemove()" value="刪除文本節點測試"/>
</body>
</html>
dom 節點操作2
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章