JS编程艺术笔记(3)-动态创建标记

//知识点概览：//parentNode属性、lastChild属性、appendChild方法、insertBefore方法、nextSiling属性////自编写的insertAfter函数：在现有元素后插入一个新元素function insertAfter(newElement,targetElement) {  var parent = targetElement.parentNode;  if (parent.lastChild == targetElement) {    parent.appendChild(newElement);  } else {//在已有元素前插入一个新元素：parentElement.insertBefore(newElement,targetElement)    parent.insertBefore(newElement,targetElement.nextSibling);  }}function preparePlaceholder() {  if (!document.createElement) return false;  if (!document.createTextNode) return false;  if (!document.getElementById) return false;  if (!document.getElementById("imagegallery")) return false;  var placeholder = document.createElement("img");  placeholder.setAttribute("id","placeholder");  placeholder.setAttribute("src","images/placeholder.gif");  placeholder.setAttribute("alt","my image gallery");  var description = document.createElement("p");  description.setAttribute("id","description");  var desctext = document.createTextNode("Choose an image");  description.appendChild(desctext);  var gallery = document.getElementById("imagegallery");  insertAfter(placeholder,gallery);  insertAfter(description,placeholder);}function prepareGallery() {  if (!document.getElementsByTagName) return false;  if (!document.getElementById) return false;  if (!document.getElementById("imagegallery")) return false;  var gallery = document.getElementById("imagegallery");  var links = gallery.getElementsByTagName("a");  for ( var i=0; i < links.length; i++) {    links[i].onclick = function() {      return showPic(this);}    links[i].onkeypress = links[i].onclick;  }}function showPic(whichpic) {  if (!document.getElementById("placeholder")) return true;  var source = whichpic.getAttribute("href");  var placeholder = document.getElementById("placeholder");  placeholder.setAttribute("src",source);  if (!document.getElementById("description")) return false;  if (whichpic.getAttribute("title")) {    var text = whichpic.getAttribute("title");  } else {    var text = "";  }  var description = document.getElementById("description");  if (description.firstChild.nodeType == 3) {    description.firstChild.nodeValue = text;  }  return false;}//把那些在页面加载完毕执行时，执行的函数创建为一个队列  //例：addLoadEvent(firstFunction);addLoadEvent(secondFunction) function addLoadEvent(func) {  var oldonload = window.onload;  if (typeof window.onload != 'function') {WW    window.onload = func;  } else {    window.onload = function() {      oldonload();      func();    }  }}//页面加载的时候执行这个函数  addLoadEvent(preparePlaceholder);addLoadEvent(prepareGallery);