JavaScript 用 cloneNode 方法克隆節點

時間 2019-12-25

標籤 javascript clonenode 方法克隆節點欄目 JavaScript 简体版

原文原文鏈接

不少時候咱們須要經過HTML DOM 的方式，用JavaScript 動態生成不少相同的節點，包括其子節點。
不少時候咱們會用for 來生成多個結構相同的節點結構，這樣咱們須要寫不少createElement、setAttribute、appendChild 等代碼。
但其實咱們只須要有一個html 的模板，就能夠用cloneNode 方法對已有的節點進行克隆，包括其子節點。javascript

如下是cloneNode 方法原型：html

Code
newElement oldElement.cloneNode(bool deep); java

這個方法只有一個參數deep，布爾值，若是爲true，則克隆oldElement 這個及其子節點，不然只可能這個節點自己。
返回值就是一個克隆的節點newElement。app

====================華麗麗的分割線====================wordpress

如下是測試代碼，test.htm 和test.js 文件。工具

Code


<html>
<head>
    <title>Test of cloneNode Method</title>
    <script type="text/javascript" src="test.js"></script>
</head>
<body>
    <div id="main">
        <div id="div-0">
            <span>Cloud018 said, </span>
            <span>"Hello World!!!"</span>
        </div>
    </div>
</body>
</html>測試

Code
// test.js

window.onload = function () {

    var sourceNode = document.getElementById("div-0"); // 得到被克隆的節點對象

    for (var i = 1; i < 5; i++) {
        var clonedNode = sourceNode.cloneNode(true); // 克隆節點
        clonedNode.setAttribute("id", "div-" + i); // 修改一下id 值，避免id 重複
        sourceNode.parentNode.appendChild(clonedNode); // 在父節點插入克隆的節點
    }
}spa

網頁加載的結果以下：code

用Google Chrome 的開發人員工具能夠看出，div-0 的節點結構都被複制了。htm

====================華麗麗的分割線====================

而當把cloneNode 的deep 參數設爲false 的時候，僅僅div-0 這個節點自己被克隆，而他的子節點（即其內容）是沒有被複制的。

 
    Code 
    
        1 
      
        var 
        clonedNode = sourceNode.cloneNode( 
        false 
        );

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。