ページ内に含まれる見出しを取得して、そこから目次を作成しようとしています。
querySelectorAllですべての見出しを取得して、ulタグにappendChildしてみたのですが、コピー元から見出しタグが消えてしまいます。コピー元というのはtest_div1セレクタの中です。

コピー＆ペーストではなく、カット＆ペーストのような挙動になってしまうのですが、これは正常なのでしょうか？間違いがあれば指摘をいただけますか。

<div id="test_section">
	<div id="test_div1">
	<h1>h1</h1>
	<h2>h2</h2>
	<h3>h3</h3>
	<h3>h3</h3>
	<h2>h2</h2>
	<h3>h3</h3>
	<h3>h3</h3>
	</div>
	<ul id="test_ul">
	</ul>
</div>

//要素の取得
let target_section = document.getElementById("test_section");
let all_header= target_section.querySelectorAll("h1,h2,h3");
//追加先
let target_table_of_contents = document.getElementById("test_ul");
//要素をulに追加
for(let i=0;i<all_header.length;i++)
		{
target_table_of_contents.appendChild(all_header[i]);
console.log(all_header[i]);
		}

行動規範の内容に同意します

回答1件

ベストアンサー

ulタグにappendChild

既存のDOMをappendChildするということは移動するということです
ulにh1～h3をそのままアペンドするというのもありえません
何を引き継ぎたいかわかりませんが、h1～h3の中の必要な情報を
liに書き出してください

sample

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('#test_section').querySelectorAll('h1,h2,h3').forEach(x=>{
4    const li=Object.assign(document.createElement('li'),{textContent:x.textContent});
5    document.querySelector('#test_ul').appendChild(li);
6  });
7});
8</script>
9<div id="test_section">
10    <div id="test_div1">
11    <h1>h1 a</h1>
12    <h2>h2 b</h2>
13    <h3>h3 c</h3>
14    <h3>h3 d</h3>
15    <h2>h2 e</h2>
16    <h3>h3 f</h3>
17    <h3>h3 g</h3>
18    </div>
19    <ul id="test_ul">
20    </ul>
21</div>