JavaScirpt第七章：重回图片库

在过去的图片库HTML文件中有一个图片和文字是为了showPic脚本服务的。若能将结构和行为彻底分开就最好不过。既然这些元素的存在是为了让DOM方法处理它们，那么用DOM方法创建它们才是最合适的选择。

  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.appendChil(desctext);
  document.getElemntsByTagName("body")[0].appendChild(placeholder);
  document.getElemntsByTagName("body")[0].appendChild("description");

上面的代码全都依赖于一个细节：图片清单刚好是<body>部分的最好一个元素。如果在这个图片清单后面还有一些其他的内容该怎么办?我们的想法是：让新创建的元素紧图片清单后面，而不管这个清单出现在在文档中的什么地方。

1.在已有元素前插入一个新元素：insertBefore()方法

parentElement.insertBefore(newElement,targetElement)

/* 新元素：想要插入的元素
   目标元素：想把这个元素插入到哪个元素之前
   父元素：目标元素的父元素 */

我们不必搞清楚父元素到底是哪个，因为targetElement元素的parentNode属性值就是它。在DOM里，元素节点的父元素必须是另一个元素节点。

var gallery=document.getElementById("imagegallery");
gallery.parentNode.insertBefore(placeholder,gallery);
/* 
  gallery的parentNode为body，所以placeholder元素被插入到为body元素的新子元素，它被插入到它的兄弟元素gallery的前面 
*/

gallery.parentNode.insertBefore(description,gallery);
/*
  把description元素也插入到gallery元素前面，成为它的一个兄弟元素
*/

2.在现有元素后插入一个新元素

（1）编写insertAfter元素

 function insertAfter(newElement,targetElement){
     var parent=targetElement.parentNode;
     if(parent.lastChild==targetElement){
          parent.appendChild(newElement);
      }else{
         parent.insertBefore(newElement,targetElement.nextSibling);
      /* 如果目标元素不是parent的最后一个子元素， 就把新元素插入到目标元素和目标元素的下一个兄弟元素之间 */
       }
  }

（2）使用insertAfter函数

  function preparePlaceholder(){
     if(!document.createElement||！document.createTextNode||！document.getElementById||
!document.getElementsById("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);
   }

（3）图片库的二次修改

addLoadEvent(preprePlaceholder);
addLoadEvent(prepareGallery);

为了启用所有功能，需要添加addLoadEvent调用preparePlaceholder和prepareGallery函数

JavaScirpt第七章：重回图片库

1.在已有元素前插入一个新元素：insertBefore()方法

2.在现有元素后插入一个新元素

猜你喜欢