TypeScript:6.appendChild

DOM操作をするときの基本appendChild

例

qiita.rb

private updateSelectedList(): void{
    const selectedItems = this.foodItems.filter(item => item.selected);
    const ul = document .querySelector('.selected-foods') as HTMLUListElement;

    ul.innerHTML = ''; 

    selectedItems.forEach(item => {
        const nameEl = item.element.querySelector('.food__name') as HTMLDivElement;
        const li document.createElement('li');
        li.textContent = nameEl.textContent;
        ul.appendChild(li);
    });
}

上記のコードは選択された食べ物が

に1個ずつ表示される

詳しく解説

⓪const nameEl = item.element.querySelector('.food__name') as HTMLDivElement;
item要素にあるfoodnameクラスを取得して格納する

①const li = document.createElement('li');
HTMLの<li>要素をJavaScriptで作ってる

②li.textContent = nameEl.textContent;
<li>要素のtextContentに'foodname'クラスのtextContentを代入

③ul.appendChild(li);
作った<li>を<ul>に追加している

アイテムネームを文字列結合してそれをulのtextContentに代入すればいいとおもっていたけどやっぱり一個ずつli要素を作ってappendChildするやり方がいいの？

回答
質問の「文字列結合でtextContentに代入」も動くは動く、、、
「リストとしての見た目・柔軟性・保守性」を考えると、<li>を１つずつ作ってappedChildする方がおすすめ

textContentに文字列を結合して代入した場合
・ulタグの意味がなくなる
・自動的に改行されない
・CSSで１つずつスタイリングできない
・削除や追加など、個別操作ができない

1つずつliを作ってappendChildした場合
・HTMLとして正しい構造
・見た目がリストして整う
・CSSでリスト項目ごとに装飾が可能
・削除やクリックイベントをli単位で制御可能
・拡張しやすい

実務やアプリ開発では
・項目の右側に「削除」ボタンをつける
・アイテムにクラスをつけて色を変える
・順番を入れ替える
このような機能はtextContent方式では実現が難しく１つずつ要素を作る胞子が圧倒的に強い。