Javascript DOM 的节点操作示例
CODE:
<body>
<div>
<div id="one" style="width:300px;height:110px;border:1px solid black;margin-top:15px">
<p>第一个元素</p>
<p>第二个元素</p>
</div>
<a href="javascript:append()">直接追加</a>
<div id="two" style="width:300px;height:110px;border:1px solid red;margin-top:15px">
<p>第一个元素</p>
<p>第二个元素</p>
</div>
<a href="javascript:insert()">之前追加</a>
<div id="three" style="width:300px;height:110px;border:1px solid green;margin-top:15px">
<p>第一个元素</p>
<p>第二个元素</p>
</div>
<a href="javascript:insertAfter()">之后追加</a>
</div>
<script>
function createObj(){
var img = document.createElement("img");
img.src="lang.gif"
img.style.width="50px";
img.style.height="50px";
return img;
}
function append(){
var one = document.getElementById("one");
var img = createObj();
one.appendChild(img);
}
function insert(){ // 这个方法要求对象必须是目标对象的父级元素!!!
var two = document.getElementById("two");
var obj = document.getElementById("two").getElementsByTagName("p")[0];
var img = createObj();
two.insertBefore(img,obj);
}
function insertAfter(){ // 没有在元素之后插入的方法,可手动创建加以合适的判断
var three = document.getElementById("three");
var obj = document.getElementById("three").getElementsByTagName("p")[0];
var img = createObj();
if(obj.nextSibling)
three.insertBefore(img,obj.nextSibling);
else
three.appendChild(img);
}
</script>
</body>
