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

<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)

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