javascript勉強中の者です。 トランプのような物を制作しているのですが、DOMの appendChildメソッドが思うように出来なくて困っています。
javascript勉強中の者です。 トランプのような物を制作しているのですが、DOMの appendChildメソッドが思うように出来なくて困っています。 (子要素の中に子要素を追加して、CSSのposition: absoluteプロパティで カードが重なっているようにしたい) <div></div> L<div></div> L<div></div> L<div></div> ↑の様なDOMツリーを、for文を使って繰り返し挿入したいです。 最後の文でエラーになります。良い方法があればご教授お願いします。 function init(){ var oya=document.getElementById("oya"); var ko=document.createElement("div"); ko.className="card"; oya.appendChild(ko); ko.appendChild(ko); }
JavaScript・41閲覧
ベストアンサー
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML</title> </head> <body> <div id="oya">oya</div> <script> var oya = document.getElementById("oya"); var ko = []; var n = 5; for(var i = 0; i < n; i++) { ko[i] = document.createElement("div"); ko[i].className = "card"; ko[i].textContent = 'ko' } oya.appendChild(ko[0]); for(var i = 0; i < n - 1; i++) { ko[i].appendChild(ko[i + 1]); } console.log(oya) </script> </body> </html>
質問者からのお礼コメント
神様ありがとうございます
お礼日時:1/18 18:45