JsGallery-basis-3

Posted on | In | Visitors:

将结构与行为彻底分开

先编写一个函数 preparePlaceholder 并把它放进 showPic.js 中，然后在文档加载时调用这个函数。这个函数要完成以下任务：

  1. 创建一个 img 元素节点；
  2. 设置这个节点的 id属性、src 属性、alt 属性；
  3. 创建一个 p元素节点；
  4. 设置这个节点的 id 属性；
  5. 创建一个文本节点；
  6. 把这个文本节点追加到 p 元素上；
  7. 把 p 元素和 img 元素插入到 gallery.html 中。

如下：

1
2
3
4
5
6
7
8
9
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 = documenty.createTextNode("Choose an image.");
description.append(desctext);
document.body

insertBefore方法

调用此方法需要：

  1. 新元素：想要插入的元素 newElement；
  2. 目标元素：你想把这个新元素插入到哪个元素 targetElement 之前；
  3. 父元素：目标元素的父元素 parentElement。

调用语法：

1
parentElement.insertBefore(newElement, targetElement)

eg ：

1
2
3
4
5
6
7
# -*- coding: utf-8 -*-ss
// 获取图片清单元素
var gallery = document.getElementById("imagegallery");
// 将 placeholder 元素插入到图片清单前面
gallery.parentNode.insertBefore(placeholder, gallery);
// 将 description 元素插入到 gallery 之前
gallery.parentNode.insertBerofe(description, gallery);

insertAfter方法（需自己编写）

编写 insertAfter

1
2
3
4
5
6
7
8
9
10
11
12
13
# -*- coding: utf-8 -*-
function insertAfter(newElement, targetElement) {
  // 把目标元素的 parentNode 属性值保存到变量 parent 中
  var parent = targetElement.parentNode;
  // 检查目标元素是不是 parent 的最后一个子元素
  if (parent.lastChild == targetElement) {
    // 如果是，将新元素追加到 parent 元素上
    parent.appendChild(newElement);
  } else {
    // 如果不是，将新元素插入到目标元素和目标元素的下一个兄弟元素之间
    parent.insertBefore(newElement, targetElement.nextSibling);
  }
}

使用 insertAfter

1
2
3
4
5
# -*- coding: utf-8 -*-
// 获取图片清单
var gallery = document.getElementById("imagegallery");
// 把 placeholder（这个变量对应着新创建出来的 img 元素） 插入到 gallery 后面
insertAfter(placeholder, gallery);