Chapter3-10 項目をリスト表示する
こんにちは!
今回は配列やHTMLへの挿入など盛りだくさんです。
Chapter3-10 項目をリスト表示する
まずは配列からです。
let 変数名 = [データ0, データ1,...,データX]
このように配列を作成します。
配列は後からデータの追加ができるので、空でも問題ありません。
todo[0]の0に当たる部分がインデックス番号で、これを指定して読み取ることができます。
ちなみに、無い番号を指定してみます。
undefined となりました。
今度は、配列から全てを読み取ります。
for...of
for(let 変数名 of 対象となる配列) { 処理内容 }
まずは let で変数を定義し、of の後ろに配列を書きます。
配列の数だけ繰り返し処理をおこなってくれます。
配列に項目を追加する方法も確認します。
push を使って配列の最後にデータを追加しています。
他には、unshift で最初に追加、pop で最後を削除、shift で最初を削除などがあります。
次は、テンプレート文字列です。
特徴としては、変数やファンクションを埋め込むことができることです。
その際には${変数名}
などと書く必要があります。
バッククォート「``」で囲みましょう。
最後に、HTMLへの挿入です。
HTMLに親要素を追加しました。
insertAdjacentHTMLメソッド
取得した要素.insertAdjacentHTML('挿入する場所', 挿入する要素)
今回は beforeend なので、終わりのタグの前に子要素として挿入しています。
他には afterbegin などを使用できます。
どこに挿入するかは大事ですので、使い分けができなければいけません。
挿入する要素は、直前に書いてある定数 li ですね。
長くなりましたが、大事な部分なのでしっかり確認していきます。
ではでは。