body{ font-family:"Arial",serif;color:#333; background#ccc; margin:1em 10%;}
h1{color:#333; background:transparent;}
a{ color:#333; font-weight:bold; text-decoration:none;}
ul{padding:0;}
li{ float:left; padding:1em; list-style:none; border-right:solid 1px #ccc;}
#p_w_picpathgallery:after{  content: ".";  clear:both; height:0; visibility:hidden; display:block; }
#placeholder{ width:400px; height:300px;}
img{ display:block; clear:both}
.icon{display:inline-block;width:16px;height:16px; vertical-align:top; background:url(smicon.png) no-repeat; padding-left:10px;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
<script src="test.js"></script> 
<link href="test.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>Snapshots</h1>
<ul id="p_w_picpathgallery">
<li >
<a href="DSC00034.jpg" title="A fireworks display" >Fireworks</a>
</li>
<li>
<a href="DSC00035.jpg" title="A cup of black coffee" >Coffee</a>
</li>
<li>
<a href="DSC00045.jpg" title="A red.red rose" >Rose</a>
</li>
<li>
<a href="DSC00033.jpg" title="The famous clock">Big Ben</a>
</li>

</ul>

</body>
</html>
function addLoadEvent(func){    //不管在页面加载完毕执行多少个函数，都应付自如
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}

function insertAfter(newElement,targetElement){                  //在已有元素后面插入一个新元素，属于通用型函数
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}

function preparePlaceholder(){            //DOM
if(!document.createElement) return false;
if(!document.createTextNode) return false;
if(!document.getElementById) return false;
if(!document.getElementById("p_w_picpathgallery")) return false;
var placeholder = document.createElement("img");
placeholder.setAttribute("id","placeholder");
placeholder.setAttribute("src","placeholder.gif");
placeholder.setAttribute("alt","my p_w_picpath gallery");
var description = document.createElement("p");
description.setAttribute("id","description");
var desctext = document.createTextNode("Choose an p_w_picpath");
description.appendChild(desctext);
/* document.getElementsByTagName("body")[0].appendChild(placeholder);//document.body.appendChild(palceholder);
document.getElementsByTagName("body")[0].appendChild(description);//document.body.appendChild(description);  */
var gallery = document.getElementById("p_w_picpathgallery")
//gallery.parentElement.insertBefore(placeholder,gallery);
//gallery.parentElement.insertBefore(descriptio,gallery); 
insertAfter(placeholder,gallery);
insertAfter(description,gallery);
}

function showPic(whichpic) {                    //点击切换图片
if(!document.getElementById("placeholder")) return false;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);                   //完全可以用 placeholder.src = source 来代替该条语句
if(document.getElementById("description")) {
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
//alert( description.nodeValue);
//alert(description.firstChild.nodeValue);                   
//等价于alert( description.childNodes[0].nodeValue);
description.firstChild.nodeValue=text;
}
return true;
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);

效果预览：

wKiom1dG1lGhQqrVAABpRNofKtI991.jpg-wh_50