javascriptにてhtml内にspan要素の追加、クラス名テキスト名に連番をつけたい

Question

前提・実現したいこと

htmlの.span-area内にspan要素を複数追加したいと考えています。その際追加したspan要素のクラス名とテキストに連番を振り当てたいと考えています。
createElement、createTextNode、appendChildを使いspan要素を一つ追加しテキスト表示することはできました。

```実現したい形

　　<div class="span-area">
      　<!-- 追加したい記述 -->
      　<span class="item1">item1</span>
      　<span class="item2">item2</span>
      　<span class="item3">item3</span>
      　<!-- 追加したい記述 -->
    </div>



```記述済みのjs

    const dom = document;
    const box = dom.querySelector('.span-area');
    const span = dom.createElement('span');
    const text = dom.createTextNode('item');
    span.appendChild(text);
    const item = box.append(span);

Answer 1

こんな感じでどうでしょうか？

<div class="span-area"></div>

<script>
    const dom = document;
    const box = dom.querySelector('.span-area');
    for (let i = 1; i <= 3; i++) {
        const span = dom.createElement('span');
        const name = `item${i}`;
        const text = dom.createTextNode(name);
        span.classList.add(name);
        span.appendChild(text);
        box.append(span);
    }
</script>

Comments

[at-ek]

無事要素が追加できました。
回答ありがとうございました。