1,追加元素
<html>
<head>
<title>appendChild</title>
<script type="text/javascript">
function f(){
var newEle = document.createElement("span");
var d = document.getElementById("t").lastChild;
document.getElementById("t").appendChild(d);
alert(document.getElementById("t").innerHTML);
}
</script>
</head>
<body id="body">
<div name="test">
<div id="t">Hello_world!<span id="sp">aaa</span><span>bbb</span><span>ccc</span></div></div>
<button onclick="f()">test</button>
</body>
</html>
2,克隆元素
<html>
<head>
<title>cloneNode</title>
<script type="text/javascript">
function f(){
var d = document.getElementById("t").cloneNode
(true).innerHTML;
var m = document.getElementById("m");
m.innerHTML = d;
alert(m.innerHTML);
/*var d = document.getElementById("t").cloneNode
(false).parentNode;
alert(d.attributes["name"].nodeValue);
var m = document.getElementById("m");
m.innerHTML = d;
alert(m.innerHTML);*/
}
</script>
</head>
<body id="body">
<div name="test">
<div id="t">Hello_world<span id="sp">aaa</span><span>bbb</span><span>ccc</span></div>
</div>
<div id="m"></div>
<button onclick="f()">test</button>
</body>
</html>
3,判斷是否有子節點
<html>
<head>
<title>hasChildNodes</title>
<script type="text/javascript">
function f(){
var d = document.getElementById("t");
var sp = document.getElementById("sp");
document.write(d.hasChildNodes()+"<br/>");
document.write(sp.hasChildNodes()+"<br/>");
}
</script>
</head>
<body id="body">
<div name="test">
<div id="t">Hello_world!<span
id="sp"></span><span>bbb</span><span>ccc</span></div></div>
<button onclick="f()">test</button>
</body>
</html>
4,插入節點
<html>
<head>
<title>insertBefore</title>
<script type="text/javascript">
function f(){
var newEle = document.createElement("span");
newEle.innerHTML = "EEE";
var d = document.getElementById("t").lastChild;
document.getElementById("t").insertBefore(newEle,d);
alert(document.getElementById("t").innerHTML);
}
</script>
</head>
<body id="body">
<div name="test">
<div id="t">Hello_world!<span id="sp">aaa</span><span>bbb</span><span>ccc</span></div></div>
<button onclick="f()">test</button>
</body>
</html>
5,替換節點
<html>
<head>
<title>replaceChild</title>
<script type="text/javascript">
function f(){
var newEle = document.createElement("span");
newEle.innerHTML = "你好";
var oldEle = document.getElementById("t").lastChild;
var oldEle_ = document.getElementById("t").replaceChild(newEle,oldEle);
alert(oldEle);
alert(document.getElementById("t").innerHTML);
}
</script>
</head>
<body id="body">
<div name="test">
<div id="t">Hello_world!<span id="sp">aaa</span><span>bbb</span><span>ccc</span></div></div>
<button onclick="f()">test</button>
</body>
</html>
6,移除節點
<html>
<head>
<title>removeChild</title>
<script type="text/javascript">
function f(){
var d = document.getElementById("t").childNodes[1];
alert(d);
document.getElementById("t").removeChild(d);
alert(document.getElementById("t").innerHTML);
}
</script>
</head>
<body id="body">
<div name="test">
<div id="t">Hello_world!<span id="sp">aaa</span><span>bbb</span><span>ccc</span></div></div>
<button onclick="f()">test</button>
</body>
</html>
javascript中常用的節點方法
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
js實現燈泡的開和滅
qq_875174369
2018-08-27 19:39:03
js省市級聯
qq_875174369
2018-08-27 19:38:48
js實現動態表格
qq_875174369
2018-08-27 19:38:47
js簡單函數運用
qq_875174369
2018-08-27 19:38:45
js點擊子菜單摺疊,再點擊子菜單展開
qq_875174369
2018-08-27 19:38:45
js下拉列表
qq_875174369
2018-08-27 19:38:45
按鈕點擊(還原)效果
中原一秋风
2018-08-27 18:33:28
JavaScript 檢測數組
付文龙
2018-08-27 17:46:11
JS:prototype的內存分析
zocojoker
2018-08-27 17:42:07
js 中 setTimeout()的用法
越封号越多
2018-08-27 17:32:52
JS只能輸入數字,數字和字母等的正則表達式
越封号越多
2018-08-27 17:32:51
js獲取屏幕高度、寬度的問題
越封号越多
2018-08-27 17:32:51
iframe中position:fixed失效
越封号越多
2018-08-27 17:32:33