Javascript

100個のdiv要素を作る

for文を使ったループ処理で100個のdiv要素を作っていきます。

  • textContent

textContent

・前回のの続きで10個作ったdi要素を100個に変えていきます。やり方は簡単で10まで処理を繰り返すようにしていたfor文の中身を100回繰り返すように変えていくだけです。

・具体的にはi < 10;の部分をi < 100;と書き換えるだけでいいでしょう。

for文でdivを増やしていく

・ブラウザで確認してみるとたしかにdiv要素は増えてますが個数を数えて行くのも大変です。こういった場合は要素をナンバリングしていくと楽なのでdivの中にカウンターの数字を表示するようにしてみましょう。

・カウンターのiをそのまま表示させればいいのでtextContentを使っていきましょう。div.textContent = i;としていけばiをbox内に表示してくれます。

・見やすいようにCSSもいじって真ん中に文字を表示していきます。

・確認すると0から99まであるので計100個のdiv要素ができたのがわかります。ここでも0からはじまっていることを意識しておきましょう。

-Javascript