JavascriptでTHMLのidやdataを書き換えると特定のデータが取得できない

質問失礼します。

現在appendToで要素を別の子要素に移動させるものを作っています。
移動させた際、移動させた要素のidとdataを書き換えています。
任意の場所に移動させることはできたのですが、2回目以降が動きません。

下記がソースです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>sample</title>
	<style>
		td {
			width: 50px;
			height: 50px;
			border: 1px solid black;
		}
		.moveMeIntoMain {
			width: 100%;
			height: 100%;
			background: pink;
		}
	</style>
</head>
<body>
	<table>
		<tr>
			<td id="head1-1">
				<div id="moveMeIntoMain1-1" class="moveMeIntoMain" data-num="1-1">要素</div>
			</td>
			<?php
				for($i = 2; $i <= 10; $i++){
					echo '<td id="head1-'.$i.'"></td>';
				}
			?>
		</tr>
	</table>
</body>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script>
		$(".moveMeIntoMain").on('click', function(){
			var $this = $(this);
			var idnum = $this.data('num');
			var ID = idnum.slice(0, -2);
			var num = idnum.slice(-1);
			var newNum = Number(num) + 1;
			var newID = ID + '-' + newNum;
			var content = document.getElementById('moveMeIntoMain' + idnum);
			$this.appendTo($("#head" + newID));
			content.id = 'moveMeIntoMain1-' + newNum;
			content.dataset.num = '1-' + newNum;
		});
	</script>
</html>

表示されるエラーは
Uncaught TypeError: Cannot set property 'id' of null

ディベロッパーツールで見た限り指定したtdの子要素にできており、
id、data共に書き換わっているのですがあくまで見た目？だけが変わっているだけで
DOMツリー？が変わっていない為、上記エラーが出て思い通りに動かないのかな？と思っております。

解決方法や参考ページ等ございましたらご教授いただけますと幸いです。

よろしくお願いいたします。

m.ts10806

2020/08/31 22:47

>THML 「HTML」では

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

回答2件

ベストアンサー

ディベロッパーツールで見た限り指定したtdの子要素にできており、

id、data共に書き換わっているのですがあくまで見た目？だけが変わっているだけで
DOMツリー？が変わっていない為、上記エラーが出て思い通りに動かないのかな？と思っております。

違います。.dataでdata-num属性を読み取ると、最初の1回目の値がキャッシュされてしまうので、そのあとdataset経由で変更した値が反映されません。

読む側もvar idnum = this.dataset.num;と、dataset経由に統一しましょう。

投稿2020/08/31 22:52

maisumakun

総合スコア145208

ringoame49

2020/08/31 23:46

ご解答ありがとうございます。 dataを取得するだけでいろいろと方法があり、意味も違うんですね。 JavaScriptでキャッシュをあまり知らなかったので調べてみます！この度もお力添えいただき大変感謝です！また機会がありましたらよろしくお願いいたします！

maisumakun

2020/08/31 23:51 編集

jQueryが.dataを実装したより後に、DOMへdatasetが実装されて、その2つを後から無理やりつないだがために不整合となっています。

ringoame49

2020/09/01 00:20

.dataでdataを取得後、dataset実行の順番なら問題ない様に感じるほどなかなか理解できていませんが頑張って調べて理解してみます！

maisumakun

2020/09/01 00:24

> .dataでdataを取得後、dataset実行の順番なら問題ない様に感じる 1回目は問題ありません。2回目に読もうとしたときに正しい値が取れなくなります。

ringoame49

2020/09/01 00:37

それは先ほど教えていただきましたキャッシュが原因で正しい値が取得できないという事ですかね？ .dataはキャッシュが残り、.datasetはキャッシュが残らない？理由を頑張って調べてみます！

maisumakun

2020/09/01 00:40

https://api.jquery.com/data/#data-html5

sousuke

2020/09/01 00:43

横からですみませんが「.dataはキャッシュが残り、.datasetはキャッシュが残らない？理由」は調べる必要はないと思います。そういう風になると理解して使えばいいと思います。

maisumakun

2020/09/01 00:45

本来、別個にあった「jQuery内の.data」と「HTMLのdata-属性（dataset）」を、どうにか相互運用できるようにするために、「最初だけdatasetからdataにコピーする」ようにしているだけなので、あとはdatasetと.dataは別々のデータとして存在し続けます。

ringoame49

2020/09/01 01:00

キャッシュが残るのが.dataだけならそういうものと覚えますが他にもキャッシュが残るものがあるのか等調べようと思いました。全然理解が追い付いていないです。。。そもそも他の方にもご指摘いただいたJQueryとJavaScriptが混在しているように、JQueryとJavaScript違いを完全に理解できていないのがダメなんのかなと思っております。自分の理解力のなさやセンスのなさには悲しいですがめげずに自分の中で噛み砕けるように調べまくります！

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