回答編集履歴
1
テキストノード削除手法の追加
test
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
こちらはいかがでしょうか。
|
|
2
2
|
|
|
3
3
|
## JavaScriptのコード例
|
|
4
|
+
##### 中身を全部削除してから、要素のみ挿入しなおす手法
|
|
4
5
|
```javascript
|
|
5
6
|
// 親要素を取得
|
|
6
7
|
const targetElm = document.querySelector('#target');
|
|
@@ -12,7 +13,23 @@
|
|
|
12
13
|
children.forEach(element => targetElm.appendChild(element));
|
|
13
14
|
```
|
|
14
15
|
|
|
16
|
+
##### 直下のテキストノードのみ削除する手法
|
|
17
|
+
```javascript
|
|
18
|
+
// 親要素を取得
|
|
19
|
+
const targetElm = document.querySelector('#target');
|
|
20
|
+
// 親要素の中身を全て取得（Nodeと言います。要素だけでなく、テキストやコメントも含む）
|
|
21
|
+
const childNodes = targetElm.childNodes;
|
|
22
|
+
|
|
23
|
+
// 取得したNodeを一つずつ繰り返し処理
|
|
24
|
+
for (const node of childNodes) {
|
|
25
|
+
// テキストノードかどうか判定
|
|
26
|
+
const isText = node.nodeType === 3;
|
|
27
|
+
// テキストノードだった場合削除
|
|
28
|
+
if (isText) node.remove();
|
|
29
|
+
}
|
|
30
|
+
```
|
|
15
31
|
## jQueryのコード例
|
|
32
|
+
##### 中身を全部削除してから、要素のみ挿入しなおす手法
|
|
16
33
|
```javascript
|
|
17
34
|
$(function() {
|
|
18
35
|
// 親要素を取得
|