1. 程式人生 > >DOM 復制節點案例

DOM 復制節點案例

20px ges img order 技術 lag ava 兩個 get

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript">
function copyDiv(flag){
var divNode=document.getElementById("div1");
var newDiv=divNode.cloneNode(flag);//復制節點

var docBody=document.getElementsByTagName("body");
docBody[0].appendChild(newDiv);//將復制的節點加入body

}

</script>
<style>
.divStyle{
border: 1px dashed #ff69b4;
margin-bottom: 15px;
width: 190px;
height: 120px;
}
</style>
<body>
<input type="button" value="只復制div節點"onclick="copyDiv(false)" />
<input type="button" value="只復制div節點和它的子節點" onclick="copyDiv(true)" /><br />

<div id="div1" class="divStyle">
div中有兩個段落
<p>段落的文本1</p>
<p>段落的文本2</p>
</div>
</body>
</html>

,,,,,,,,,,,,,,,,,

技術分享圖片

copyDiv(flag)函數用於復制節點。。。當參數為false時。復制節點自身。為true時,復制自身及其子節點。

DOM 復制節點案例