Javascriptを使用したdivループの書き方

Web 開発では、JavaScript を使用して HTML 要素を動的に生成するのが一般的なテクノロジであり、共通の要件の 1 つは、ループ内で同じタイプの複数の HTML タグを生成する必要があることです。この記事では、JavaScript を使用して div ループを実装する方法を紹介します。

手順:

1. div コンテナの作成

JavaScript を使用して HTML 要素を動的に生成するには、まず要素の親コンテナを見つける必要があります。コンテナの div コンテナのコー​​ドは次のとおりです。

<div id="container">

</div>

2. JavaScript 関数の作成

指定された数値を生成するために、createDiv という名前の関数を作成します。ループ内の div タグの数。次に、関数内でループカウント用の変数 i を定義します。

function createDiv(num) {
    for (let i = 0; i < num; i++) {
        //TODO
    }
}

3. div タグを作成し、各要素の id 属性と class 属性を設定します

ループ内で、JavaScript の createElement() メソッドを使用して新しい div 要素を作成できます。次に、setAttribute() メソッドを使用して、各要素の id 属性と class 属性を設定します。

function createDiv(num) {
    for (let i = 0; i < num; i++) {
        let div = document.createElement("div");
        div.setAttribute("id", "myDiv" + i);
        div.setAttribute("class", "myDivClass");
        //TODO
    }
}

4. 各要素のテキストとスタイルの設定

作成した div 要素を使用して、テキストの内容、スタイル、イベントを設定できます。ここでは、textContent プロパティを使用して各要素のテキスト コンテンツを設定します。

function createDiv(num) {
    for (let i = 0; i < num; i++) {
        let div = document.createElement("div");
        div.setAttribute("id", "myDiv" + i);
        div.setAttribute("class", "myDivClass");
        div.textContent = "我是第" + (i+1) + "个div元素";
        div.style.cssText = 'width: 50px; height: 50px; background-color: #ccc;';
        //TODO
    }
}

5. 新しい div 要素を親コンテナに追加します

作成した div 要素を、Web ページに表示するために親コンテナにも追加する必要があります。新しい div 要素は、appendChild() メソッドを使用して親コンテナに追加できます。

function createDiv(num) {
    let container = document.getElementById("container");
    for (let i = 0; i < num; i++) {
        let div = document.createElement("div");
        div.setAttribute("id", "myDiv" + i);
        div.setAttribute("class", "myDivClass");
        div.textContent = "我是第" + (i+1) + "个div元素";
        div.style.cssText = 'width: 50px; height: 50px; background-color: #ccc;';
        container.appendChild(div);
    }
}

6. 関数を呼び出して指定した数の div 要素を生成します

これで、createDiv 関数がループして指定した数の div 要素を生成し、親に追加できるようになります。コンテナーでは、関数を呼び出すことで div 要素を生成できます。

createDiv(10);

完全なコードは次のとおりです:

    
        


<div id="container">

</div>    

結論:

この記事では、JavaScript を使用して div ループを実装する方法を紹介します。HTML 要素を動的に生成することで、開発者をさらに支援 Web ページを簡単に構築します。この技術を習得すれば、プロジェクトに柔軟に適用でき、開発効率を向上させることができます。

以上がJavascriptを使用したdivループの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。