ホームページ > 記事 > ウェブフロントエンド > JavaScript 配列から HTML リストを作成するにはどうすればよいですか?
JavaScript 配列から HTML リストを作成するにはどうすればよいですか?
- WBOY転載
- 2023-08-24 22:29:021057ブラウズ
このチュートリアルでは、JavaScript 配列から HTML リストを作成するさまざまな方法を見ていきます。単純な HTML リストについて話す場合、ul (順序なしリスト) を使用して、その li em> (リスト）ラベル。
n 個の項目があり、それらをリストに印刷する必要がある状況を考えてみましょう。その場合、すべての項目を書き込むのは非常に忙しい作業になります。手動で投影して印刷しますよね？これは、JavaScript の反復メソッドを使用して簡単に実行できます。
JavaScript で HTML リストを作成するさまざまな方法を見てみましょう。
#for ループの使用
#フラグメントでの - for
ループの使用
#forEach() ループの使用 - for ループの使用
createElemnt
メソッドを使用してリスト項目を繰り返してul (順序なしリスト) 項目に追加する通常の JavaScript のデフォルトのメソッドです。 。 例<html>
<body>
<h3> HTML list using JavaScript using for loop</h3>
<ul id="UnList"></ul>
<script>
let data = ["item1", "item2", "item3", "item4"];
let list = document.getElementById("UnList");
for (i = 0; i < data.length; ++i) {
var li = document.createElement('li');
li.innerText = data[i];
list.appendChild(li);
}
</script>
</body>
</html>フラグメントでの for ループの使用
これは上で説明した最初の方法と同じですが、違いは
Fragment # を使用することです。 ## を挿入します。フラグメントはフラグメントを分離して保持する傾向があります。つまり、フラグメントは DOM ツリーに関連付けられていないため、実際の DOM に関連付けられていないため、ブラウザーが実行する作業が少なくなります。上記の方法では、フラグメントがない場合、ブラウザーは画面の背後で多くの作業を実行するため、実際のパフォーマンスに影響があり、実際のページではレンダリングされません。したがって、フラグメントを使用することをお勧めします。 フラグメントを使用するには、フラグメントを使用せずにリスト項目に直接挿入するのではなく、まずリスト項目をフラグメントに追加し、次にフラグメントをリストに追加します。p>Example
<!DOCTYPE html>
<html>
<body>
<h3>HTML list using JavaScript with fragment</h3>
<ul id="UnList"></ul>
<script>
let data = ["item1", "item2", "item3", "item4"];
let list = document.getElementById("UnList");
var fragList = document.createDocumentFragment();
for (i = 0; i < data.length; ++i) {
var li = document.createElement('li');
li.textContent = data[i];
fragList.appendChild(li);
}
list.appendChild(fragList);
</script>
</body>
</html>forEach() メソッドの使用
forEach()
は JavaScript の配列メソッドです。 item 指定された関数は要素ごとに 1 回呼び出されます。基本的には、配列リストに存在する各項目に対してカスタム関数コールバック関数を実行します。これは for ループと同じように機能します。 例<!DOCTYPE html>
<html>
<body>
<h3>HTML list using JavaScript forEach()</h3>
<ul id="UnList"></ul>
<script>
let data = ["item1", "item2", "item3", "item4"];
let list = document.getElementById("UnList");
var fragList = document.createDocumentFragment();
data.forEach(function (item) {
var li = document.createElement('li');
li.textContent = item;
fragList.appendChild(li);
});
list.appendChild(fragList);
</script>
</body>
</html>以上、JavaScript を使用して HTML リストを直接作成する方法をすべて見てきました。気に入っていただければ幸いです。 以上がJavaScript 配列から HTML リストを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。