Comment utiliser une liste non ordonnée en javascript

PHPz
Libérer: 2023-04-24 14:41:17
original
1026 Les gens l'ont consulté

Créer une liste non ordonnée à l'aide de JavaScript est un processus très simple et il existe deux manières principales de le faire.

La première méthode consiste à utiliser les méthodes document.createElement() et document.createTextNode(). Cette approche crée un nouvel élément li, ajoute le nœud de texte à l'élément li, puis ajoute l'élément li à l'élément ul. Voici le code qui implémente cette méthode :

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); // 将列表项添加到无序列表中
}
Copier après la connexion

La deuxième méthode consiste à utiliser l'attribut innerHTML. Cette approche crée une chaîne HTML puis l'attribue à l'attribut innerHTML de l'élément ul, qui analysera automatiquement la chaîne dans un élément DOM. Voici le code pour implémenter cette méthode :

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文档中
Copier après la connexion

Il existe deux façons ci-dessus de créer une liste non ordonnée à l'aide de JavaScript. Ils sont tous très simples et ne nécessitent que quelques connaissances de base en JavaScript pour être mis en œuvre. Ainsi, que vous soyez un développeur débutant ou expérimenté, ces méthodes peuvent alimenter votre projet avec des listes non ordonnées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal