createElement, appendChildを(おそらく)習得したので、自分なりに整理してみた。 #JavaScript

タイトル通りです。

箇条書きのlist itemを5つ、JavaScriptで作成し、同時にテキストとidも設定しています。

日本語の使い方、変数の命名などおかしいところあると思いますが、私と同じくこの辺りで躓いている方の助けになれば幸いです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<!--
    --目標-------
    親ノード
    ・ 子ノードは1です。idは li1 です。
    ・ 子ノードは2です。idは li2 です。
    ・ 子ノードは3です。idは li3 です。
    ・ 子ノードは4です。idは li4 です。
    ・ 子ノードは5です。idは li5 です。
    ------------------
-->
    <ul id="list">
        親ノード。id=list
        <!--<ul>要素(id:list)を親とする-->
    </ul>
    <script>//親を指定し、子を作成し、挿入
        let parent = document.getElementById("list");
        /////親を指定し、変数parentに保持。

        for(i=1;i<=5;i++){
        let item = document.createElement("li");
        /////子を作成。createElementの()内が、作りたい子供の要素。今回は<li>要素。
        item.textContent = "子ノード" + i + "です。idは li" + i + " です。";
        //子のテキストを設定。
        item.id = "li" + i;
        //子のidを設定。
        //forでiを回しているためidは重複しない。
        parent.appendChild(item);
        /////色々設定し終わったli要素の子childをul要素の親parentに挿入。
        }
    </script>
</body>
</html>