3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-06-22

タイトル通りです。

箇条書きの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>
3
2
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?