So verwenden Sie eine ungeordnete Liste in Javascript

Das Erstellen einer ungeordneten Liste mit JavaScript ist ein sehr einfacher Vorgang, und es gibt zwei Möglichkeiten, dies zu erreichen.

Die erste Methode besteht darin, die Methoden document.createElement() und document.createTextNode() zu verwenden. Dieser Ansatz erstellt ein neues li-Element, fügt den Textknoten zum li-Element hinzu und fügt dann das li-Element zum ul-Element hinzu. Im Folgenden finden Sie den Code zum Implementieren dieser Methode:

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); // 将列表项添加到无序列表中
}

Die zweite Methode besteht darin, das innerHTML-Attribut zu verwenden. Dieser Ansatz erstellt eine HTML-Zeichenfolge und weist sie dann dem innerHTML-Attribut des ul-Elements zu, wodurch die Zeichenfolge automatisch in ein DOM-Element analysiert wird. Das Folgende ist der Code zum Implementieren dieser Methode:

var fruits = ['apple', 'banana', 'orange', 'kiwi'];

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文档中

Die oben genannten sind zwei Möglichkeiten, eine ungeordnete Liste mit JavaScript zu erstellen. Sie sind alle sehr einfach und erfordern zur Implementierung lediglich einige grundlegende JavaScript-Kenntnisse. Unabhängig davon, ob Sie Anfänger oder erfahrener Entwickler sind, können diese Methoden Ihr Projekt mit ungeordneten Listen vorantreiben.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie eine ungeordnete Liste in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!