回答編集履歴

1

el.outerHTML = el.textContent

2022/12/24 14:40

投稿

think49
think49

スコア18189

test CHANGED
@@ -26,6 +26,21 @@
26
26
  document.querySelectorAll('.hide').forEach(el => el.classList.remove('hide'));
27
27
  ```
28
28
 
29
+ 本題とは関係ありませんが、`el.outerHTML = el.textContent` は、textContent値にHTMLタグが含まれていた場合、コード実行後に元のテキストノード値を復元できない問題があります。
30
+
31
+ ```html
32
+ <span id="test">&lt;strong&gt;foo&lt;/strong&gt;</span>
33
+ <script>
34
+ 'use strict';
35
+ const span = document.getElementById('test');
36
+ span.outerHTML = span.textContent;
37
+ </script>
38
+ ```
39
+
40
+ この問題は、`replaceChild` で要素ノードからテキストノードに置換するコードに変更する事で修正できます。
41
+
42
+ - [Node\.replaceChild \- Web API \| MDN](https://developer.mozilla.org/ja/docs/Web/API/Node/replaceChild)
43
+
29
44
  ### 再現可能な短いサンプルコード
30
45
 
31
46
  本回答で解決できなかったとして、まずはfukuさん自身で「現象を再現可能な最小限のコード」を作成する事から始めることをお勧めします。