初始化一个div（包括其子元素）

Question

假如一个元素含有多个子元素

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    .....
</div>

对它的子元素做多重样式或内容的变换

 child[0].style = ...
 child[1].appendChild(..)
 child[2].textContent = ...
 ....

做完这么多操做后，我想将他们重置，就是变为刚打开页面时的样子。
目前我想到的是：

//页面刚一加载获取父节点，复制一遍
var parent = document.querySelector('.parent')；
var initial = parent.cloneNode(true)
//操作后重置
parent.parentNode.replaceChild(initial, parent)

不知道这种做法好不好，各位能给出什么意见吗？

Answer 1

这是对真实dom的操作，要知道对真实dom操作，性能是不太高的。真要操作的话，可以用DocumentFragment去做

Answer 2

一般来说复制 innerHTML 就行了，可以节省一些内存。