很多时候我们会用for 来生成多个结构相同的节点结构,这样我们需要写很多createElement、setAttribute、appendChild 等代码。 但其实我们只需要有一个html 的模板,就可以用cloneNode 方法对已有的节点进行克隆,包括其子节点。
以下是
cloneNode 方法原型:
1 | newElement oldElement.cloneNode(bool deep); |
这个方法只有一个参数deep,布尔值,如果为true,则克隆oldElement 这个及其子节点,否则只可能这个节点本身。返回值就是一个克隆的节点newElement。
案例:
03 | < title >Test of cloneNode Method</ title > |
08 | < span >Cloud018 said, </ span > |
09 | < span >"Hello World!!!"</ span > |
13 | window.onload = function () { |
14 | var sourceNode = document.getElementById("div-0"); // 获得被克隆的节点对象 |
15 | for (var i = 1; i < 5 ; i++) { |
16 | var clonedNode = sourceNode .cloneNode(true); // 克隆节点 |
17 | clonedNode.setAttribute("id", "div-" + i); // 修改一下id 值,避免id 重复 |
18 | sourceNode.parentNode.appendChild(clonedNode); // 在父节点插入克隆的节点 |