在.js和.html中使用变量

Question

我正在用html建立网站，并且有一个外部.js文件。 .js文件中有一个数组，我希望以列表形式显示在网站中，因此需要将该数组放入html文件中，但我不知道该怎么做。

我的html：

我想要这个标签中的数组

    <p id="demo"></p>

我的外部js：

    fruits = ["Banana", "Orange", "Apple", "Mango"];

无论如何，可以在html文件中使用该变量，还是可以在js文件中将数组显示为列表？

提前致谢！

Answer 1

这取决于您要如何显示它们，但主要是要使用innerHTML将它们放置在元素中。

 let p = document.getElementById('demo'); let fruits = ["Banana", "Orange", "Apple", "Mango"]; p.innerHTML = fruits.join('<br>'); 

 <p id="demo"></p> 

您也可以通过这种方式来创建无序列表：

 let p = document.getElementById('demo'); let fruits = ["Banana", "Orange", "Apple", "Mango"]; p.innerHTML = fruits.map(i => `<li>${i}</li>`).join(''); 

 <ul id="demo"></ul>