日期:2014-05-16 浏览次数:20313 次
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS插入节点相关练习</title>
<style>
ul,li { display:block; margin:0; padding:0; list-style-type:none;}
#color ul { height:40px; overflow:hidden;}
#color ul li { float:left; width:100px; text-align:center;}
#color ul li a { display:block; line-height:40px;}
</style>
</head>
<body>
<script>
function addLoadEvent(func){
var onload=window.onload;
if(typeof window.onload !="function"){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}
function placeholder(){
var placeholder=document.createElement("div");//创建一个DIV节点
placeholder.setAttribute("id","placeholder");//设置这个DIV的属性
var pcolor=document.getElementById("color");
pcolor.appendChild(placeholder);//在pcolor最后一个子节点之后添加placeholder
var placeImg=document.createElement("img");
placeholder.appendChild(placeImg);
}
function linkon(){
var pcolor=document.getElementById("color");
var links=pcolor.getElementsByTagName("a");
for(var i=0; i<links.length; i++){
links[i].onclick=function(){
return showpic(this);
}
}
}
function showpic(thislink){
alert("test");
return false;
}
addLoadEvent(placeholder);
addLoadEvent(linkon);
</script>
<div id="color">
<ul>
<li><a href="http://baidu.com/" title="The color of this picture is Black." target="_blank">Black</a></li>
<li><a href="http://baidu.com/" title="The color of this picture is Red." target="_blank">Red</a></li>
<li><a href="http://www.baidu.com/" title="The color of this picture is Blue." target="_blank">Blue</a></li>
<li><a href="http://baidu.com/" title="The color of this picture is Green." target="_blank">Green</a></li>
<li><a href="http://baidu.com/" title="The color of this picture is Purple." target="_blank">Purple</a></li>
<li><a href="http://baidu.com/" title="The color of this picture is Yellow." target="_blank">Yellow</a></li>
</ul>
</div>
</body>
</html>