JS案例:实现复制菜单示例

来自CloudWiki
跳转至: 导航搜索
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM元素节点复制示例</title>
<script type="text/javascript">
	function AddClone(deep){
		//获得节点元素
		var selNode=document.getElementById("genderId");
		//复制节点
		var newSelect=selNode.cloneNode(deep);
		//创建新的节点
		var newNode=document.createElement("br");
		//获得当前节点,并将创建的新节点添加到当疥节点的末尾
		var divNode=document.getElementById("div1");
		divNode.appendChild(newSelect);
		divNode.appendChild(newNode);		
		}
</script>
</head>
<body>
	<form name="form1" action="" method="post">
    <hr>
    <select name="genderSelect" id="genderId">
    	<option value="%">请选择性别</option>
    	<option value="0">男</option>
    	<option value="1">女</option>
    </select>
    <hr>
    <div id="div1"></div>
    <input type="button" value="普通复制" onClick="AddClone(false)"/>
    <input type="button" value="深度复制" onClick="AddClone(true)"/>
</form>
</body>
</html>