获得原始图片的父元素现在有了要插入的图片，还需要找到插入的地方。但是不能将其插入到已有的图片中，而是要将其插入到已有图片之前然后再删除原来的图片。为此需要知道已有图片的父元素，实际上这就是插入和删除操作的真正关键所在。
应该记得，前面的文章中曾经指出 DOM 确实把网页看成一棵树，即节点的层次结构。每个节点都有父节点（树中更高层次的节点，该节点是它的一个子级），可能还有自己的子节点。对于图片来说，它没有子级 —— 要记住图片是空元素，但是它肯定有父节点。甚至不需要知道父节点是什么，但是需要访问它。
为此，只要使用每个 DOM 节点都有的 parentNode 属性即可，比如：
1
| var imgParent = hatImage.parentNode;
|
确实非常简单！可以肯定这个节点有子节点，因为已经有了一个：原来的图片。此外，完全不需要知道它是一个 div、p 或者页面的 body，都没有关系！
插入新图片现在得到了原来图片的父节点，可以插入新的图片了。很简单，有多种方法可以添加子节点：
- insertBefore(newNode, oldNode)
- appendChild(newNode)
因为希望把新图片放在旧图片的位置上，需要使用 insertBefore()（后面还要使用 removeChild() 方法）。可使用下面这行 JavaScript 代码把新图片元素插入到原有图片之前：
1
2
| var imgParent = hatImage.parentNode;
imgParent.insertBefore(newImage, hatImage);
|
现在原图片的父元素有了两个 子元素：新图片和紧跟在后面的旧图片。必须指出，这里包围 这些图片的内容没有变，而且这些内容的顺序也和插入之前完全相同。仅仅是这个父节点中增加了一个子节点，即旧图片之前的新图片。
删除旧图片现在只需要删除旧图片，因为网页中只需要新图片。很简单，因为已经得到了旧图片元素的父节点。只要调用 removeChild() 并把需要删除的节点传递给它即可：
1
2
3
| var imgParent = hatImage.parentNode;
imgParent.insertBefore(newImage, hatImage);
imgParent.removeChild(hatImage);
|
现在，用新图片替换旧图片的工作已基本完成了。HTML 应该如 所示。
清单 5. 用新图片替换旧图片1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
var newImage = document.createElement("img");
newImage.setAttribute("src", "rabbit-hat.gif");
var imgParent = hatImage.parentNode;
imgParent.insertBefore(newImage, hatImage);
imgParent.removeChild(hatImage);
}
</script>
</head>
<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" />
</p>
</form>
</body>
</html>
|
连接 JavaScript最后一步，可能也是最简单的，就是把 HTML 表单连接到刚刚编写的 JavaScript 函数。需要每当用户点击 Hocus Pocus! 按钮的时候运行 showRabbit() 函数。为此只要向 HTML 中增加一个简单的 onClick 事件处理程序即可。
1
| <input type="button" value="Hocus Pocus!" onClick="showRabbit();" />
|
这种简单的 JavaScript 编程应该非常容易了。将其添加到 HTML 页面中，保存它然后在 Web 浏览器中打开。页面初看起来应该和 相同，但是点击 Hocus Pocus! 后应该看到 所示的结果。
图 3. 兔子戏法 |
