Javascript 在一些DOM模拟（原生js）之后重置元素的初始状态

我想保存我的元素的初始状态（与所有孩子一起），然后执行一些操作（初始化滚动条插件），在窗口调整大小事件之后，我想将这些更改的值清除到保存的“纯”元素中，然后重新初始化滚动条插件（我只想做一个滚动条元素，以响应不同的视图）

我尝试使用

.cloneNode（true）、jquery.clone（true）和jquery.replaceWith（）

，但这对我不起作用，因为这些方法以某种方式保留了以前完成的所有更改。因此，我无法获得保存的初始HTML。 我应该使用outerHTML吗？谢谢你的帮助

var GLOBAL_rawScrollBarNode;
var GLOBAL_scrollBarParent;

$(document).ready(function($){
      GLOBAL_rawScrollBarNode = $('#scrollbar3').clone();

      GLOBAL_scrollBarParent = $('.portfolio-scroll-box')[0];



      portfolioScrollbarOfDeviceWidth();

    $(window).resize(function(){ 
        portfolioScrollbarOfDeviceWidth();
});



function portfolioScrollbarOfDeviceWidth() {
    var documentWidth = document.documentElement.clientWidth;

    //GLOBAL_scrollBarParent.removeChild(document.getElementById('scrollbar3'));
    //GLOBAL_scrollBarParent.appendChild(GLOBAL_rawScrollBarNode);

    GLOBAL_scrollBarParent.replaceWith(GLOBAL_rawScrollBarNode[0])


    var $scrollBarEl = $('#scrollbar3');

    setTimeout(() => {
        if (documentWidth < 942) {
            console.log("XXX")
            var bar = $scrollBarEl.tinyscrollbar({ axis: 'x',sizethumb: 135 });
            console.log(bar);
        } else {
            console.log("YYY")
            var bar = $scrollBarEl.tinyscrollbar({ axis: 'y',sizethumb: 135 });
            console.log(bar);
        }
    }, 2000)

}

var-GLOBAL\u-barnode；
var GLOBAL_父代；
$（文档）.ready（函数（$）{
全局_rawScrollBarNode=$（'#scrollbar3'）.clone（）；
全局_scrollBarParent=$（'.portfolio滚动框'）[0]；
portfolioScrollbarOfDeviceWidth（）；
$（窗口）。调整大小（函数（）{
portfolioScrollbarOfDeviceWidth（）；
});
函数portfolioScrollbarOfDeviceWidth（）{
var documentWidth=document.documentElement.clientWidth；
//GLOBAL_scrollBarParent.removeChild（document.getElementById（'scrollbar3'）；
//全局滚动条parent.appendChild（全局滚动条节点）；
全局\u scrollBarParent.replaceWith（全局\u ScrollBarNode[0]）
变量$scrollBarEl=$（“#scrollbar3”）；
设置超时（（）=>{
如果（文档宽度<942）{
控制台日志（“XXX”）
var bar=$scrollbrel.tinyscrolllbar（{axis:'x'，sizethumb:135}）；
控制台日志（bar）；
}否则{
console.log（“YYY”）
var bar=$scrollbrel.tinyscrollbar（{axis:'y'，sizethumb:135}）；
控制台日志（bar）；
}
}, 2000)
}

另外，对于保存的元素的outerHTML，然后将其像innerHTML一样分配给其父元素-它可以正常工作。但我想知道如何以其他更优雅的方式解决这个问题：）