JavaScriptで順序なしリストを使用する方法-フロントエンドQ&A-php.cn

JavaScriptで順序なしリストを使用する方法

PHPz

リリース： 2023-04-24 14:41:17

オリジナル

1052 人が閲覧しました

JavaScript を使用して順序なしリストを作成するプロセスは非常に簡単ですが、これを実現するには主に 2 つの方法があります。

最初の方法は、document.createElement() メソッドと document.createTextNode() メソッドを使用することです。このアプローチでは、新しい li 要素を作成し、テキストノードを li 要素に追加してから、li 要素を ul 要素に追加します。このメソッドを実装するコードは次のとおりです。

var ul = document.createElement('ul'); // 创建无序列表
document.body.appendChild(ul); // 添加到HTML文档中

var fruits = ['apple', 'banana', 'orange', 'kiwi'];  // 定义水果数组

for (var i = 0; i < fruits.length; i++) {
  var li = document.createElement(&#39;li&#39;); // 创建列表项
  var text = document.createTextNode(fruits[i]); // 创建文本节点
  li.appendChild(text); // 将文本添加到列表项中
  ul.appendChild(li); // 将列表项添加到无序列表中
}

ログイン後にコピー

2 番目の方法は、innerHTML 属性を使用することです。このアプローチでは、HTML 文字列を作成し、それを ul 要素の innerHTML 属性に割り当てます。これにより、文字列が自動的に解析されて DOM 要素になります。このメソッドを実装するコードは次のとおりです。

var fruits = [&#39;apple&#39;, &#39;banana&#39;, &#39;orange&#39;, &#39;kiwi&#39;];

var html = &#39;<ul>'; // 创建无序列表字符串

for (var i = 0; i < fruits.length; i++) {
  html += &#39;<li>' + fruits[i] + '</li>'; // 将列表项添加到无序列表字符串中
}

html += '</ul>'; // 关闭无序列表标签

document.body.innerHTML = html; // 将HTML字符串添加到HTML文档中

ログイン後にコピー

上記は、JavaScript を使用して順序なしリストを作成する 2 つの方法です。これらはすべて非常に単純で、実装するには JavaScript の基本的な知識のみが必要です。したがって、初心者でも経験豊富な開発者でも、これらのメソッドを使用すると、順序なしリストを使用してプロジェクトを強化できます。

以上がJavaScriptで順序なしリストを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。