概要

li要素をユーザーが増やせるようにしたい。との質問をいただきましたので、回答しました。

解決方法

要素をユーザーが自由に増やせるようにするなら、JavaScriptで処理を行います。JavaScriptでボタンのクリックイベントをトリガーにして、要素を追加するサンプルを作ってみます。

アクションするボタンを作る

まず、アクションさせるボタンを設置し、ボタンを押したときのに処理を実行できるようにします。

<button class="add">追加</button>
<ul class="list">
</ul>
<script>
    document.querySelector('.add').addEventListener('click', () => {
       // ボタンを押した後の処理
    })
</script>

querySelectorとは？

指定されたセレクタに一致する最初の要素を取得できます。

https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector

addEventListenerとは？

指定した要素に特定のイベントが実行されるたびに呼び出される関数を設定することができます。今回はclickイベントを設定しました。

https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

JavaScriptで要素を作る

要素をJavaScriptで作ります。 document.createElementを使って要素を作ります。

//li要素を生成する。
const li = document.createElement('li')

詳しい使い方 → https://developer.mozilla.org/ja/docs/Web/API/Document/createElement

作った要素の中身を設定する

li.innerHTML = '追加されたよ';

innerHTMLで作ったli要素の中身を書き換えます。

追加したいところに作った要素を追加する

document.querySelector('.list').appendChild(li)

appendChildで指定した要素に作った要素を追加します。

完成形

See the Pen リスト追加 by Kazunari Hirosawa (@kazunari-h) on CodePen.