質問編集履歴
4
コードに説明を追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -9,6 +9,8 @@
|
|
|
9
9
|
###ソースコード
|
|
10
10
|
以下のようなHTMLの置換（`<dt>`→`<p>`）が、②で実現できず、その理由を知りたいです。
|
|
11
11
|
（※HTML文法は本件と無関係なのでスルーしてください。）
|
|
12
|
+
|
|
13
|
+
・ChromeでエクスポートしたブックマークのHTMLファイルです（以下は簡易記述で、実際はエクスポートしたまま用います。）
|
|
12
14
|
```html
|
|
13
15
|
<!-- 最初の状態 -->
|
|
14
16
|
<dl>
|
|
@@ -22,6 +24,7 @@
|
|
|
22
24
|
<p><a></a></p>
|
|
23
25
|
</dl>
|
|
24
26
|
```
|
|
27
|
+
・開発ツールに記述するJavaScriptです
|
|
25
28
|
```js
|
|
26
29
|
var dts = document.querySelectorAll('dt');
|
|
27
30
|
for(var i=0; i < dts.length; i++) {
|
3
質問の経緯に加筆
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -6,20 +6,20 @@
|
|
|
6
6
|
|
|
7
7
|
以下ソースコードが②で作動しなかったために疑問を持ちました。
|
|
8
8
|
|
|
9
|
-
###
|
|
9
|
+
###ソースコード
|
|
10
10
|
以下のようなHTMLの置換（`<dt>`→`<p>`）が、②で実現できず、その理由を知りたいです。
|
|
11
11
|
（※HTML文法は本件と無関係なのでスルーしてください。）
|
|
12
12
|
```html
|
|
13
13
|
<!-- 最初の状態 -->
|
|
14
14
|
<dl>
|
|
15
|
-
<dt><a></a></dt>
|
|
15
|
+
<dt><a></a></dt>
|
|
16
|
-
<dt><a></a></dt>
|
|
16
|
+
<dt><a></a></dt>
|
|
17
17
|
</dl>
|
|
18
18
|
|
|
19
19
|
<!-- 目的の状態 -->
|
|
20
20
|
<dl>
|
|
21
|
-
<p><a></a></p>
|
|
21
|
+
<p><a></a></p>
|
|
22
|
-
<p><a></a></p>
|
|
22
|
+
<p><a></a></p>
|
|
23
23
|
</dl>
|
|
24
24
|
```
|
|
25
25
|
```js
|
|
@@ -35,9 +35,25 @@
|
|
|
35
35
|
###質問の経緯
|
|
36
36
|
今回の質問の発端としては、上記の生JavaScriptの処理についてjQueryで取り組み、実現できなかったという以前の質問（[jQueryで指定タグを置換](https://teratail.com/questions/363953)）でした。
|
|
37
37
|
|
|
38
|
-
この以前の質問においてjQueryが実行できない原因が「jQueryが入っていないことだ」とのご指摘を受け、
|
|
38
|
+
この以前の質問においてjQueryが実行できない原因が「jQueryが入っていないことだ」とのご指摘を受けまして、jQueryを入れる処理をコンソール画面で実行したところ、jQueryによる置換は実現できました。それが次の処理です。
|
|
39
|
+
```jQuery
|
|
40
|
+
// jQueryを入れる処理
|
|
41
|
+
// コンソール画面で１行ずつエンターで実行する
|
|
42
|
+
var jq = document.createElement('script');
|
|
43
|
+
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js";
|
|
44
|
+
document.getElementsByTagName('head')[0].appendChild(jq);
|
|
45
|
+
jQuery.noConflict();
|
|
46
|
+
window.$ = jQuery;
|
|
39
47
|
|
|
48
|
+
// jQueryによる置換
|
|
49
|
+
$('dt').each(function() {
|
|
50
|
+
if ($(this).children('a').length === 1) {
|
|
51
|
+
const innerHtml = $(this).html();
|
|
52
|
+
$(this).replaceWith($('<p>').html(innerHtml));
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
```
|
|
40
|
-
他方、
|
|
56
|
+
他方、今回の質問は生JavaScriptですのでjQueryの有無は関係なく、コンソール画面で普通に実行できるはずとの考えなのですが、なぜかできず、今回の質問に至りました。
|
|
41
57
|
|
|
42
58
|
「WEBサイト」と「PCのHTMLファイル」をブラウザで開いた場合の、JavaScriptの挙動にはどのよ違いがあるのでしょうか？
|
|
43
59
|
|
2
リンク訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
```
|
|
34
34
|
|
|
35
35
|
###質問の経緯
|
|
36
|
-
今回の質問の発端としては、上記の生JavaScriptの処理についてjQueryで取り組み、実現できなかったという以前の質問（[
|
|
36
|
+
今回の質問の発端としては、上記の生JavaScriptの処理についてjQueryで取り組み、実現できなかったという以前の質問（[jQueryで指定タグを置換](https://teratail.com/questions/363953)）でした。
|
|
37
37
|
|
|
38
38
|
この以前の質問においてjQueryが実行できない原因が「jQueryが入っていないことだ」とのご指摘を受け、実際にWebページにjQueryを入れる処理をコンソール画面で実行したらjQueryによる置換は実現できました。
|
|
39
39
|
|
1
誤字訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
```
|
|
34
34
|
|
|
35
35
|
###質問の経緯
|
|
36
|
-
今回の質問の発端としては、上記の生
|
|
36
|
+
今回の質問の発端としては、上記の生JavaScriptの処理についてjQueryで取り組み、実現できなかったという以前の質問（[JavaScriptで指定タグを置換](https://teratail.com/questions/363953)）でした。
|
|
37
37
|
|
|
38
|
-
この以前の質問において
|
|
38
|
+
この以前の質問においてjQueryが実行できない原因が「jQueryが入っていないことだ」とのご指摘を受け、実際にWebページにjQueryを入れる処理をコンソール画面で実行したらjQueryによる置換は実現できました。
|
|
39
39
|
|
|
40
40
|
他方、上記は生JavaScriptでありますのでjQueryの有無は関係なく、コンソール画面で普通に実行できるはずとの考えなのですが、なぜかできず、今回の質問に至りました。
|
|
41
41
|
|