javascript - 在 .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>