質問編集履歴
4
いつの間にか行番号が自動で表示されるように
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
タイトルの通りです。
|
|
2
2
|
※行頭にあるのは行番号ですのであしからず。
|
|
3
3
|
```js
|
|
4
|
-
|
|
4
|
+
console.log(document.createElement("div").append(document.createElement("span")));
|
|
5
5
|
```
|
|
6
6
|
を実行すると`undefined`と返りますが、これを`<div><span></span></div>`と返る（型はもちろん`Element`）ようにしたいです。
|
|
7
7
|
```js
|
|
8
|
-
|
|
8
|
+
Element.prototype.addNodes = function(...nodes) {
|
|
9
|
-
|
|
9
|
+
this.append(...nodes);
|
|
10
|
-
|
|
10
|
+
return this;
|
|
11
|
-
|
|
11
|
+
}
|
|
12
12
|
```
|
|
13
13
|
としてaddNodesを呼び出せば返り値にできますが、**addNodesとかでなくappendを直接上書きして使いたい**というワガママな考えを持っておりまして。
|
|
14
14
|
なにをしたいかというと、
|
|
15
15
|
```js
|
|
16
|
-
|
|
16
|
+
Element.prototype.append = function(...nodes) {
|
|
17
|
-
|
|
17
|
+
this.nodeList.push(...nodes);
|
|
18
|
-
|
|
18
|
+
return this;
|
|
19
|
-
|
|
19
|
+
}
|
|
20
20
|
```
|
|
21
21
|
みたいに迂回（？）して追加させれば元のappendと同じように使えるのかなと。
|
|
22
22
|
もちろん**nodeListは読み取り専用**なので要素を追加することはできませんが、
|
|
@@ -24,21 +24,21 @@
|
|
|
24
24
|
|
|
25
25
|
ちなみに、
|
|
26
26
|
```js
|
|
27
|
-
|
|
27
|
+
Element.prototype.append = function(...nodes) {
|
|
28
|
-
|
|
28
|
+
for(let i = 0; i < nodes.length; i++) {
|
|
29
|
-
|
|
29
|
+
this.innerHTML += nodes[i].outerHTML;
|
|
30
|
-
|
|
30
|
+
}
|
|
31
|
-
|
|
31
|
+
return this;
|
|
32
|
-
|
|
32
|
+
}
|
|
33
33
|
```
|
|
34
34
|
とすれば確かに要素は追加できますが、innerHTMLはDOMを再構築するため、this内にあらかじめ付与した**イベントリスナーが削除されてしまう**という欠点を持っているのでこの方法以外でお願いしたいです。
|
|
35
35
|
|
|
36
36
|
なぜこんなことをしたいかというと要素作成関連を一行にまとめるためにappendを入れ子で使えるようにしたいからなんですよね。
|
|
37
37
|
```js
|
|
38
|
-
|
|
38
|
+
document.createElement("div").append( // apend(undefined)となる
|
|
39
|
-
|
|
39
|
+
document.createElement("div").append( // 返り値がないためここでundefined
|
|
40
|
-
|
|
40
|
+
document.createElement("span")
|
|
41
|
-
4 | )
|
|
42
|
-
|
|
41
|
+
)
|
|
42
|
+
)
|
|
43
43
|
```
|
|
44
44
|
とすると、1行目でundefinedをappendできませんよというエラーがでます。
|
3
spanです。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
```js
|
|
38
38
|
1 | document.createElement("div").append( // apend(undefined)となる
|
|
39
39
|
2 | document.createElement("div").append( // 返り値がないためここでundefined
|
|
40
|
-
3 | document.createElement("span
|
|
40
|
+
3 | document.createElement("span")
|
|
41
41
|
4 | )
|
|
42
42
|
5 | )
|
|
43
43
|
```
|
2
なにがしたいか
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,21 +1,22 @@
|
|
|
1
1
|
タイトルの通りです。
|
|
2
|
+
※行頭にあるのは行番号ですのであしからず。
|
|
2
3
|
```js
|
|
3
|
-
console.log(document.createElement("div").append(document.createElement("span")));
|
|
4
|
+
1 | console.log(document.createElement("div").append(document.createElement("span")));
|
|
4
5
|
```
|
|
5
6
|
を実行すると`undefined`と返りますが、これを`<div><span></span></div>`と返る（型はもちろん`Element`）ようにしたいです。
|
|
6
7
|
```js
|
|
7
|
-
Element.prototype.addNodes = function(...nodes) {
|
|
8
|
+
1 | Element.prototype.addNodes = function(...nodes) {
|
|
8
|
-
this.append(...nodes);
|
|
9
|
+
2 | this.append(...nodes);
|
|
9
|
-
return this;
|
|
10
|
+
3 | return this;
|
|
10
|
-
}
|
|
11
|
+
4 | }
|
|
11
12
|
```
|
|
12
13
|
としてaddNodesを呼び出せば返り値にできますが、**addNodesとかでなくappendを直接上書きして使いたい**というワガママな考えを持っておりまして。
|
|
13
14
|
なにをしたいかというと、
|
|
14
15
|
```js
|
|
15
|
-
Element.prototype.append = function(...nodes) {
|
|
16
|
+
1 | Element.prototype.append = function(...nodes) {
|
|
16
|
-
this.nodeList.push(...nodes);
|
|
17
|
+
2 | this.nodeList.push(...nodes);
|
|
17
|
-
return this;
|
|
18
|
+
3 | return this;
|
|
18
|
-
}
|
|
19
|
+
4 | }
|
|
19
20
|
```
|
|
20
21
|
みたいに迂回（？）して追加させれば元のappendと同じように使えるのかなと。
|
|
21
22
|
もちろん**nodeListは読み取り専用**なので要素を追加することはできませんが、
|
|
@@ -23,11 +24,21 @@
|
|
|
23
24
|
|
|
24
25
|
ちなみに、
|
|
25
26
|
```js
|
|
26
|
-
Element.prototype.append = function(...nodes) {
|
|
27
|
+
1 | Element.prototype.append = function(...nodes) {
|
|
27
|
-
for(let i = 0; i < nodes.length; i++) {
|
|
28
|
+
2 | for(let i = 0; i < nodes.length; i++) {
|
|
28
|
-
this.innerHTML += nodes[i].outerHTML;
|
|
29
|
+
3 | this.innerHTML += nodes[i].outerHTML;
|
|
29
|
-
}
|
|
30
|
+
4 | }
|
|
30
|
-
return this;
|
|
31
|
+
5 | return this;
|
|
31
|
-
}
|
|
32
|
+
6 | }
|
|
32
33
|
```
|
|
33
34
|
とすれば確かに要素は追加できますが、innerHTMLはDOMを再構築するため、this内にあらかじめ付与した**イベントリスナーが削除されてしまう**という欠点を持っているのでこの方法以外でお願いしたいです。
|
|
35
|
+
|
|
36
|
+
なぜこんなことをしたいかというと要素作成関連を一行にまとめるためにappendを入れ子で使えるようにしたいからなんですよね。
|
|
37
|
+
```js
|
|
38
|
+
1 | document.createElement("div").append( // apend(undefined)となる
|
|
39
|
+
2 | document.createElement("div").append( // 返り値がないためここでundefined
|
|
40
|
+
3 | document.createElement("spane")
|
|
41
|
+
4 | )
|
|
42
|
+
5 | )
|
|
43
|
+
```
|
|
44
|
+
とすると、1行目でundefinedをappendできませんよというエラーがでます。
|
1
innerHTMLはDOMを再構築するため
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -30,4 +30,4 @@
|
|
|
30
30
|
return this;
|
|
31
31
|
}
|
|
32
32
|
```
|
|
33
|
-
とすれば確かに要素は追加できますが、this内にあらかじめ付与した**イベントリスナーが削除されてしまう**という欠点を持っているのでこの方法以外でお願いしたいです。
|
|
33
|
+
とすれば確かに要素は追加できますが、innerHTMLはDOMを再構築するため、this内にあらかじめ付与した**イベントリスナーが削除されてしまう**という欠点を持っているのでこの方法以外でお願いしたいです。
|