liタグを複数回追加しても、最後のliタグしか追加されない

Question

現在、JavaScriptのみでページネーションを作成しています。
問題は、liタグを作成する変数liを定義しappendChild('li')によってブラウザに表示させたいのですが、最後の要素のみ追加されてしまうということです。
初学者ゆえ初歩的な質問かもしれませんが、わかる方がいたらご教授お願いいたします。

---以下コード---

<p class="title">Menu</p>
        <ul id="page_count"></ul>
        <ul id="contents"></ul>
        <ul class="pagination">
            <li id="prev">&lt;</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li id="next">&gt;</li>
        </ul>

body {
    font-size: 50px;
    text-align: center;
    margin: 0 auto;
}

.pagination {
    display: flex;
}

li {
    list-style: none;
    margin-left: 5px;
    margin: 0 auto;
}

.title {
    font-size: 70px;
}

const items = [
        {"id": 1, "name": "salad"},
        {"id": 2, "name": "olive_oil"},
        {"id": 3, "name": "vinegar"},
        {"id": 4, "name": "sesami"},
        {"id": 5, "name": "chicken_soup"},
        {"id": 6, "name": "flour"},
        {"id": 7, "name": "sesami"},
        {"id": 8, "name": "salt"},
        {"id": 9, "name": "pepper"},
        {"id": 10, "name": "coffee"},
        {"id": 11, "name": "short_cake"},
        {"id": 12, "name": "cheese_cake"},
        {"id": 13, "name": "pudding"},
        {"id": 14, "name": "pafe"},
        {"id": 15, "name": "apple_pie"},
        {"id": 16, "name": "humberger"},
        {"id": 17, "name": "chocolate"},
        {"id": 18, "name": "fruit"},
    ];


    const pagination = () => {
        let li = document.createElement('li');
        const page_count = document.getElementById('page_count');
        const contents = document.getElementById('contents');
        let current_list = 0; 
        const step = 5;
        const pages = Math.ceil(items.length/5);

　　　　　//ページ・コンテンツ数　<== ここも無視されてしまう
        page_count.appendChild(li).innerHTML = (current_list + 1) + "/" + pages + " " + "page" + "コンテンツ数: " + step;


        const viewItems = value => {
            for (let i = 0; i < value.length; i++) {
                // console.log(value[i].name);　<==ここではすべてのnameが取得できている
                contents.appendChild(li).innerHTML = value[i].name;
            }
        }

        viewItems(items);
        //ここでitemsのfruitのみ表示される

        // contents.appendChild(li).innerHTML = viewItems(items);
    }

    window.onload = () => {
        pagination();
    }

Answer 1

document.createElementを1回しか行っていないので、作ったノードは1つだけです。
そのノードを（innerHTMLを上書きしながら）あちこちに移動させているだけなので、最後にappendChildした位置に残ります。

追加したい数だけノードを作りましょう。

Comments

[samepanda]

ご回答ありがとうございます。
document.createElementを一回定義したら、複数回使用することができると間違った理解をしていました。
liタグを作成する関数を作る、または様々なところでdocument.createElementを記述するなどする必要があるのですね。
ありがとうございました。

Answer 2

liは1個しか作っていないので、何度も同じliをappendChildしても、それは追加ではなく移動になってしまいます。

追加したい数だけdocument.createElementを行うなど、やり方を変える必要があります。

Comments

[maisumakun]

追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます

https://developer.mozilla.org/ja/docs/Web/API/Node/appendChild

[maisumakun]

あと、<li>の中身としてHTMLタグがないのであれば、innerHTMLではなくtextContentを使いましょう。

[samepanda]

ご回答ありがとうございます。
viewItems内にliを作成した結果、予期通りに表示されました。
確かに、liは一つしか作っていなかったですね。。。
ベストアンサーにさせていただきます。
改めてありがとうございました。

Answer 3

viewItems内のfor文にliタグを作成する変数を入れることによって、無事表示されました。

const viewItems = value => {
            for (let i = 0; i < value.length; i++) {
                contents.appendChild(li2).innerHTML = value[i].name;
            }
        }

↓

const viewItems = value => {
            for (let i = 0; i < value.length; i++) {
                let new_li  = document.createElement('li');
                contents.appendChild(new_li).innerHTML = value[i].name;
            }
        }