DOM帮助(显示一个无序的水果列表，并给每个水果一个类)

DOM Help (displaying an unordered list of fruits and giving each fruit a class)

本文关键字：一个 无序 帮助 显示 DOM 列表      更新时间：2023-09-26

我有一个水果列表变量，如下所示:

var fruits = [
"Apple",
"Banana",
"Grape",
"Pineapple",
"Pear"
 ];

使用DOM，我想显示一个无序的水果列表，然后给每个水果一个"fruity"类。

我仍然对DOM感到很不舒服，但这是我尝试过的:

for (var i = 0; i < fruits.length; i++) {
var unorderedList = document.createElement('ul');
appendChild(ul);
}
for (var i = 0; i < fruits.length; i++) {
var class = document.createElement('class', 'fruity');
appendChild(class);
}
谁能告诉我至少我是在正确的轨道上吗?我排除了什么?我用的是"文档"吗?createElement"在哪里需要它?我完全卡住了=/谢谢。

你做对了。

您希望创建一个 ul元素，然后创建多个li元素。class不是一个元素，它是一个属性;您可以通过使用元素的className反射属性来设置元素的class(由于历史原因，反射属性不只是称为class)。

: 

var ul = document.createElement('ul');
fruits.forEach(function(fruit) {
    var li = document.createElement('li');
    li.innerHTML = fruit; // For instance, just to give us something to see
    li.className = "fruity";
    ul.appendChild(li);
});

…然后将ul附加在某个地方，例如:

document.body.appendChild(ul);

…或类似的。

生活例子:

var fruits = [
  "Apple",
  "Banana",
  "Grape",
  "Pineapple",
  "Pear"
];
var ul = document.createElement('ul');
fruits.forEach(function(fruit) {
  var li = document.createElement('li');
  li.innerHTML = fruit; // For instance, just to give us something to see
  li.className = "fruity";
  ul.appendChild(li);
});
document.body.appendChild(ul);
.fruity {
  color: purple;
}

(它们是紫色的，因为它们是fruity类。)

关于DOM的更多信息:http://www.w3.org/DOM/DOMTR

你偏离了正确的轨道;)

var unorderedList = document.createElement("ul");
 fruits.forEach(function (fruit) {
     var listElement = document.createElement("li");
     var listText = document.createTextNode(fruit);
     listElement.appendChild(listText);
     listElement.className = "fruity";
     unorderedList.append(listElement);
 }
 // assuming you have an element with id = "fruits" in your html 
 document.getElementById("fruits").appendChild(unorderedList);

您可以在同一个循环中分配className和innerHTML，即:

var fruits = [
"Apple",
"Banana",
"Grape",
"Pineapple",
"Pear"
 ];
var myElement = document.getElementById("myFruits");
for (var i = 0; i < fruits.length; i++) {
var unorderedList = document.createElement('li');
unorderedList.innerHTML = fruits[i];
unorderedList.className = fruits[i];
myElement.appendChild(unorderedList);
}
<ul id="myFruits"></ul>

上面的js将生成下面的html 

<ul id="myFruits">
<li class="Apple">Apple</li>
<li class="Banana">Banana</li>
<li class="Grape">Grape</li>
<li class="Pineapple">Pineapple</li>
<li class="Pear">Pear</li>
</ul>
相关文章：