for文を使用して要素を動的に作成する

複数のHTML要素を一度に作成
HTMLドキュメントで同じ要素を複数作成してみます.
for文で簡単に生成したい.
まず、新しい要素を作成するときに必要なcreateElementメソッドです.
このメソッドを使用して作成した要素を親要素に追加する場合に必要な要素
appendChildメソッドを使用して作成

let parent = document.querySelector(".parentElement");
let childElement = null;

for (let i = 1; i < 11; ++i) {
childElement = document.createElement("div");
childElement.className = "childElement" + i;
parent.append(childElement);
}

最初にfor文で作成された各要素のクラス名の後ろに
classListプロパティを使用してiを使用して数値を割り当てます.
長いこと探した.
ああ...classListは読み取り専用の方法だったのか.
もちろん、add、removeメソッドを使用して値を追加または削除できます.
-MDN(Element.classList)
膝をたたき,classListの代わりにclassName法を用いて動的にクラス名を作成した.
また,別の方法setAttributeも考えられる.
createElementとして作成されるノード要素は「オブジェクト」です.
オブジェクトのプロパティと値を指定する方法setAttribute.
以下に示すクラスを作成することもできます.

newElement.setAttribute("class", "childElement" + i);

💡 insight:innerHTMLを使用する際の注意点
Elementノードの他の例を探していると、たまにYouTubeで見かけます
New Lextureというエンコーディング講師がinnerHTMLプロパティの使用について言及しました.
イベントをクリックするたびにHTMLに要素を追加するシェイプを作成します.
innerHTMLプロパティで複合加算演算子を使用して要素を追加する場合があります.

innerHTML += `...` ;

innerHTMLプロパティは、オブジェクトの「分割」、「作成」、「分割」、および「作成」を継続する形式です.
彼は、大量のデータを処理すると性能の問題が発生するので、これは良い方法ではないと言った.
コードはできるだけ簡潔にしたほうがいい.
原理を正しく理解し、簡潔に書く.
そんな理解はなく、簡潔に編んだだけで、明らかに雲泥の差だ.
私はずっと努力して自分の実力を高めて、いつか私は
開発を真剣に考えるレベルになりたい😇