WEBページの変化に伴い、一部の特定の要素だけを更新表示する方法

前提、実現したいこと

独自の見出し（TOC、outliner）を作成しています。WEBページのhタグなどを拾って一覧にし、それをクリックすることでその要素にジャンプできるといった類のものです。

形的にはそれなりに仕上がってはいるんですが、自作TOCが抽出したリンクをクリックした直後に、WEBページ状態の変更（特にYahoo!ホームページなどの縦に長いサイト）を検知し、それに伴って必要とあらば自作TOCも更新してTOCの一覧の内容をアップデートし、改めて自作TOCの一覧を自動的に継ぎ足すといった処理を実装したいのですが、理想とする内容を実装できずにいます。
WEBページ自体をリロードするのではなく、TOC（一部の特定の要素）だけを更新、表示を改めるといった処理が望ましいです。私の今回の場合は、目的の為にどんな処理が必要ですか？

JavaScriptとCSSを分けており、併用して使う形になります。keydownでTOCを呼び出し、様々な方法でTOCを消す仕様にしています。

該当のソースコード

JavaScript
1function MY_TOC_IVENT_SCOPE() {
2    document.addEventListener('keydown', (e) => {
3        // 現時点では、とりあえず基本はChrome、Chromiumでの表示を想定しています。
4        if (e.ctrlKey && e.shiftKey && e.key == 'H') {
5            // Firefoxは「H」キーが使えないので、
6            // if( e.altKey && e.shiftKey && e.key=='O' ){
7            function _my_toc_ivent() {
8
9                let all, pLevel, cLevel, cList, counter, div, style, ol, li, a, i, j;
10                let d = document;
11
12                let toc = d.getElementById("created_toc");
13                let close_toc = d.getElementById("my_toc_close_btn");
14
15                // let _obj = document.createElement("iframe");
16                // toc.insertBefore(toc,_obj);
17                // _obj.insertBefore(toc, _obj);
18
19                if (toc) {
20                    d.body.removeChild(toc);
21                    d.body.removeChild(close_toc);
22                } else {
23                    all = d.getElementsByTagName("*");
24                    let toc = d.createElement("ol");
25                    toc.onclick = new Function("event", `
26let target=event.target,ols=target.getElementsByTagName("ol"),flag=target.flag==0;
27if(ols.length>0){ols.item(0).style.display=flag?"block":"none";
28target.style.listStyleImage=flag?"none":"url(data:image/gif;)";
29target.flag=flag?1:0;}
30`);
31
32                    let cList = toc;
33                    let pLevel = 1;
34                    let counter = [0, 0, 0, 0, 0, 0];
35                    for (i = 0; i < all.length; i++) {
36　　　　　// 暫定的に<h3>までを指定。それ以降指定するとGoogle検索などで余計な項目も増える。
37                        if (all.item(i).tagName.match(/^h([1-3])$/i)) { 
38                            let cLevel = RegExp.$1;
39                            let a = d.createElement("a");
40                            a.href = "javascript:;";
41
42                            a.onclick = new Function(' let click_target = document.getElementsByTagName("h' + cLevel + '").item(' + counter[cLevel - 1] + ');  click_target.scrollIntoView((true)); window.scrollBy(0, -57); click_target.classList.add("active-animation");   setTimeout(()=>{ click_target.classList.remove("active-animation");}, 2500);  ');
43                            // window.requestAnimationFrame(()=>{  });
44
45                            // a.onclick = new Function(' let click_target = document.getElementsByTagName("h'+cLevel+'").item('+counter[cLevel-1]+');  click_target.scrollIntoView((true)); window.scrollBy(0, -57); click_target.classList.add("active-animation");   setTimeout(()=>{ click_target.classList.remove("active-animation");}, 2500);    document.getElementById("created_toc").src += `?v=${new Date().getTime()}`;  ');
46
47                            a.appendChild(d.createTextNode(all.item(i).textContent));
48
49                            let li = d.createElement("li");
50                            li.appendChild(a);
51                            counter[cLevel - 1]++;
52                            if (cLevel > pLevel) {
53                                ol = d.createElement("ol");
54                                ol.style.padding = "1em";
55                                ol.style.margin = "0em 1em";
56                                ol.appendChild(li);
57                                if (cList.lastChild) {
58                                    cList.lastChild.appendChild(ol);
59                                } else {
60                                    cList.appendChild(ol);
61                                }
62                                cList = ol;
63                            } else if (cLevel < pLevel) {
64                                for (j = 0; j < (pLevel - cLevel) * 2; j++)
65                                    if (cList.parentNode) cList = cList.parentNode;
66                                cList.appendChild(li);
67                            } else {
68                                cList.appendChild(li);
69                            }
70                            pLevel = cLevel;
71                        }
72                    }
73
74                    let style = d.createElement("style");
75                    style.appendChild(d.createTextNode(`
76/* 編集しづらいのでCSSエディタに移動。*/
77`));
78                    let div = d.createElement("div");
79                    div.id = "created_toc";
80                    div.appendChild(style);
81                    div.appendChild(toc, close_toc);
82                    d.body.insertBefore(div, d.body.firstChild);
83
84                    document.body.insertAdjacentHTML('beforeend', `
85<input type="button" id="my_toc_close_btn" value="X" />
86 `);
87
88                }
89
90            };
91            _my_toc_ivent();
92
93        }
94    });
95
96    //----------------------------------------------------
97
98    // Outliner以外の要素をクリックで非表示にする。
99    document.addEventListener('click', (c) => {
100        let toc = document.getElementById("created_toc");
101        let close_toc = document.getElementById("my_toc_close_btn");
102        if (toc, close_toc) {
103            if (!c.target.closest('#created_toc')) {
104                document.body.removeChild(toc);
105                document.body.removeChild(close_toc);
106            }
107        }
108    });
109
110    // 「ｘ」ボタンクリックで非表示にする。
111    document.getElementById("my_toc_close_btn")
112        .addEventListener('click', () => {
113            let toc = document.getElementById("created_toc");
114            let close_toc = document.getElementById("my_toc_close_btn");
115            if (toc, close_toc) {
116                document.body.removeChild(toc);
117                document.body.removeChild(close_toc);
118            }
119        });
120
121    //----------------------------------------------------
122
123    let toc_list_update_ = //(document.getElementById("created_toc"));
124        document.documentElement;
125    let toc_list_update_resizeObserver = new MutationObserver(toc_list_ => {
126        toc_list_update_resizeObserver.disconnect();
127        _my_toc_ivent();
128        toc_list_update_resizeObserver.observe(toc_list_update_, toc_list_update_config);
129    });
130
131    let toc_list_update_config = {
132        //attributes: true,
133        childList: true,
134        characterData: true,
135        subtree: true,
136    }
137    toc_list_update_resizeObserver.observe(toc_list_update_, toc_list_update_config);
138
139};
140MY_TOC_IVENT_SCOPE();
141

CSS
1/* CSS アニメーションの動作 */
2@keyframes my_toc_css {
3
4    /* border: solid 2px red !important; */
5    0% {
6        outline-color: transparent;
7    }
8
9    50% {
10        outline-color: red;
11    }
12
13    100% {
14        outline-color: transparent;
15    }
16}
17
18.active-animation {
19    outline-width: 3px;
20    outline-style: solid;
21    outline-color: transparent;
22    animation-name: my_toc_css;
23    animation-iteration-count: 3;
24    animation-duration: .8s;
25}
26
27/*************************************/
28
29/* 自作したTOCの外観の装飾 */
30#created_toc {
31    text-align: left;
32    position: fixed;
33    display: flex;
34    top: 0px;
35    right: 0px;
36    line-height: 100%;
37    letter-spacing: 0.5em;
38    /* max- を除外 */
39    width: 25%;
40    height: 98%;
41    line-height: 20em;    /* ← Yahoo!トップページで使う場合はいる。 */
42    /* Firefoxは font-size:10px; line-height: 1.5em; */
43    font-size: 1px !important;    /* ← ここを !important にしないとstylusに負ける。*/
44    overflow: auto;
45    background: #eef1f1;
46    -moz-opacity: 0.9;
47    border-style: solid;
48    border-width: 2px;
49    border-color: #000;
50    border-radius: 11px;
51    z-index: 999999999;
52}
53
54#created_toc a:link {
55    color: #0416fb;
56}
57
58#created_toc a:hover {
59    color: #01afd5;
60}
61
62#created_toc ol {
63    counter-reset: item;
64}
65
66#created_toc li {
67    /* max-height: 50px; */
68    /* min-height: 20px; */
69    counter-increment: item;
70    list-style-type: none;
71    white-space: pre;
72    /*word-break: keep-all;*/
73}
74
75#created_toc li:before {
76    font-size: smaller;
77    /* word-break: keep-all;*/
78    content: counters(item, '.') '. ';
79    cursor: ns-resize;
80}
81
82/* クローズボタンの装飾、表示位置 */
83#my_toc_close_btn {
84    padding: 0 0 0 0 !important;
85    position: fixed;
86    top: 0px;
87    right: 24%;  /* ← ここをpx指定にするとズーム調整で親要素から剥離する */
88    /* max- を除外 */
89    width: 1.2%;
90    height: 2.5%;
91    /* font-size: 100% !important; */ /* ← 急遽ボツ */
92    font-size: 1vmax !important; /* ← ページのズーム率に影響されない。*/
93    font-weight: bold !important;
94    font-family: sans-serif !important;
95    box-shadow: inset 0 0 3px #110e0e8f;
96    background: red;
97    border-radius: 15px;
98    z-index: 999999999;
99    cursor: pointer;
100}
101

試したこと

new MutationObserverを前提にWEBページの状態の変化を検知し、それに伴ってTOCの内容の中身も変更できないか、試しています。
teratailだけは何故か正常にScrollJumpしてくれませんが、今回の自身の執着している事はそこではありません。

https://ameblo.jp/personwritep/entry-12637975230.html
https://q.hatena.ne.jp/1236447424#a901122

以下↓をもとにa.onclick=new Functionの中へ追記するとTOCが破損した。
https://oshiete.goo.ne.jp/qa/5291845.html#a_area

その他
function reloadHoge() {
$.get(document.URL).done(function(data, textStatus, jqXHR) {
const doc = new DOMParser().parseFromString(data, 'text/html');
$('#created_toc').html(doc.querySelector('#created_toc').innerHTML);
});
}
setInterval(reloadHoge, 10000);