teratail
回答率
85.46%
質問するログイン新規登録
トップJavaScriptに関する質問Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.とエラーが出る。

編集履歴

回答編集履歴

4

追記

2018/03/29 07:31

投稿

yambejp
yambejp

スコア115010

test CHANGED
@@ -111,3 +111,81 @@
111
111
  ```
112
112
 
113
113
  ※一部修正
114
+
115
+
116
+
117
+ # グループごとにbを下げる
118
+
119
+ ```javascript
120
+
121
+ <style>
122
+
123
+ .aqua{background-Color:aqua;}
124
+
125
+ .lime{background-Color:lime;}
126
+
127
+ .yellow{background-Color:yellow;}
128
+
129
+ </style>
130
+
131
+ <script>
132
+
133
+ window.addEventListener('DOMContentLoaded', function(e){
134
+
135
+ document.querySelector('#js-move-bottom').addEventListener('click', function() {
136
+
137
+ var mysite_b = document.querySelectorAll('.serp--middle-b');
138
+
139
+ Array.prototype.forEach.call(mysite_b,function(x){
140
+
141
+ x.parentNode.appendChild(x);
142
+
143
+ });
144
+
145
+ });
146
+
147
+ });
148
+
149
+ </script>
150
+
151
+ <input type="button" id="js-move-bottom" value="test">
152
+
153
+ <div class="aqua">0
154
+
155
+ <div class="serp--middle-a">a</div>
156
+
157
+ <div class="serp--middle-b">b1</div>
158
+
159
+ <div class="serp--middle-b">b2</div>
160
+
161
+ <div class="serp--middle-c">c</div>
162
+
163
+ </div>
164
+
165
+
166
+
167
+ <div class="lime">1
168
+
169
+ <div class="serp--middle-b">b1</div>
170
+
171
+ <div class="serp--middle-a">a</div>
172
+
173
+ <div class="serp--middle-b">b2</div>
174
+
175
+ <div class="serp--middle-c">c</div>
176
+
177
+ </div>
178
+
179
+
180
+
181
+ <div class="yellow">2
182
+
183
+ <div class="serp--middle-a">a</div>
184
+
185
+ <div class="serp--middle-b">b</div>
186
+
187
+ <div class="serp--middle-c">c</div>
188
+
189
+ </div>
190
+
191
+ ```

3

調整

2018/03/29 07:31

投稿

yambejp
yambejp

スコア115010

test CHANGED
@@ -78,7 +78,11 @@
78
78
 
79
79
  Array.prototype.forEach.call(mysite,function(x){
80
80
 
81
+ Array.prototype.forEach.call(parent,function(y){
82
+
81
- parent.forEach(function(y){y.appendChild(x.cloneNode(true))});
83
+ y.appendChild(x.cloneNode(true));
84
+
85
+ });
82
86
 
83
87
  });
84
88
 
@@ -105,3 +109,5 @@
105
109
  <div class="serp-wrap yellow">2</div>
106
110
 
107
111
  ```
112
+
113
+ ※一部修正

2

追記

2018/03/29 07:06

投稿

yambejp
yambejp

スコア115010

test CHANGED
@@ -47,3 +47,61 @@
47
47
  <div class="serp-wrap yellow">2</div>
48
48
 
49
49
  ```
50
+
51
+
52
+
53
+ # 移動ではなくコピー
54
+
55
+
56
+
57
+ ```javascript
58
+
59
+ <style>
60
+
61
+ .aqua{background-Color:aqua;}
62
+
63
+ .lime{background-Color:lime;}
64
+
65
+ .yellow{background-Color:yellow;}
66
+
67
+ </style>
68
+
69
+ <script>
70
+
71
+ window.addEventListener('DOMContentLoaded', function(e){
72
+
73
+ document.querySelector('#js-move-bottom').addEventListener('click', function() {
74
+
75
+ var parent = document.querySelectorAll('.serp-wrap');
76
+
77
+ var mysite = document.querySelectorAll('.serp--middle');
78
+
79
+ Array.prototype.forEach.call(mysite,function(x){
80
+
81
+ parent.forEach(function(y){y.appendChild(x.cloneNode(true))});
82
+
83
+ });
84
+
85
+ });
86
+
87
+ });
88
+
89
+ </script>
90
+
91
+ <input type="button" id="js-move-bottom" value="test">
92
+
93
+ <div class="aqua">0
94
+
95
+ <div class="serp--middle">a</div>
96
+
97
+ <div class="serp--middle">b</div>
98
+
99
+ <div class="serp--middle">c</div>
100
+
101
+ </div>
102
+
103
+ <div class="serp-wrap lime">1</div>
104
+
105
+ <div class="serp-wrap yellow">2</div>
106
+
107
+ ```

1

追記

2018/03/29 07:02

投稿

yambejp
yambejp

スコア115010

test CHANGED
@@ -1,6 +1,14 @@
1
1
  たとえばこう
2
2
 
3
+ ```CSS
3
4
 
5
+ .aqua{background-Color:aqua;}
6
+
7
+ .lime{background-Color:lime;}
8
+
9
+ .yellow{background-Color:yellow;}
10
+
11
+ ```
4
12
 
5
13
  ```javascript
6
14
 
@@ -19,3 +27,23 @@
19
27
  });
20
28
 
21
29
  ```
30
+
31
+ ```HTML
32
+
33
+ <input type="button" id="js-move-bottom" value="test">
34
+
35
+ <div class="aqua">0
36
+
37
+ <div class="serp--middle">a</div>
38
+
39
+ <div class="serp--middle">b</div>
40
+
41
+ <div class="serp--middle">c</div>
42
+
43
+ </div>
44
+
45
+ <div class="serp-wrap lime">1</div>
46
+
47
+ <div class="serp-wrap yellow">2</div>
48
+
49
+ ```