Question

我有一个带有以下数组的js文件

var fruits = [ "Apples","Oranges","Pears","Grapes","Pineapples","Mangos" ];

在我的HTML文件中，我想创建一个容器，并将包含数组中所有水果的有序列表写入我刚刚创建的容器中，但是我遇到了严重问题而且找不到太多的在线帮助。我是初学者，这就是我所拥有的

<div class = "container1">
</div>

<h3>Fruits</h3>
<html>
    <head>
       <script src="Web Programming/Assignments/Assignment #3/assignment3/list.js"></script>
    </head>
    <body>
        <div container1= "fruits"></div>
    </body>

Answer 1

你应该给元素一个id，你的自定义html属性将作为一个选择器，但典型的方式是id。然后，您可以在循环中简单地创建一些元素，为它们提供元素的文本内容：

＆＃13;

var fruits = [ "Apples","Oranges","Pears","Grapes","Pineapples","Mangos" ];

var el = document.getElementById('fruits');
var ol = document.createElement('ol');
el.appendChild(ol);
fruits.forEach(function (fruit) {
  var f = document.createElement('li');
  f.appendChild(document.createTextNode(fruit));
  ol.appendChild(f);
});

＆＃13;

<div id="fruits"></div>

＆＃13;

如果你坚持使用container1=...，你可以选择

var el = document.querySelector('div[container1="fruits"]');

Answer 2

首先在html文件中包含您的脚本。在身体的底部。

根据需要提供容器的容器ID。

代码将是这样的：

var arrayFruits = ["bananas", "apples", "etc"];

var container = document.getElementById("container"); 

for (var i = 0; i < arrayFruits.length; i++) {
  var list = document.createElement("li");
  list.innerHTML = arrayFruits[i];
  container.appendChild(list);
}

从JS文件打印有序列表

2 个答案: