对于那些需要在页面中创建多个类似节点的情况，可以准备一个“模板”节点，创建新节点时首先调用cloneNode方法获得“模板”节点的副本，然后根据实际应用的需要对该副本节点进行局部内容的修改，使用cloneNode方法是一种非常高效的创建节点的方式，特别是对于复杂页面结构，如果完全使用create***方法创建，代码会十分繁琐且不利于后期的修改维护。
实例：
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>1</title>
<script type="text/javascript">
var i=0;
function add() {
var div = $("div");
var body = div.parentNode;
var clone = div.cloneNode(true);
clone.id = "div" + i;
clone.firstChild.innerHTML += " " + (++i);
body.appendChild(clone);
}
function $(id) {return document.getElementById(id);}
</script>
<style type="text/css">
p {border-bottom:1px dotted #e63}
</style>
</head>
<body>
<input type=button onclick=add() value=click />
<div id=div><h1>Sample Page</h1>
<p>some text 
</p></div>
</body>
</html>
