Question

我正在努力获取我的javascript文件中的一系列对象，并使用html和iframe将数组中的对象放入我的网站上的选项列表中。我制作了一个iframe ID，但我不确定从那里开始，并在网页上显示一些内容。

HTML代码

<!DOCTYPE html>
<html>
<head>
<title>Assessed Assignment A8</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="fruits.js"></script>


</head>
<body>

<iframe id="Containers"></iframe>



</body>
     </html>

Javascript代码

items = [{"title":"Apple"},{"title":"Orange"},{"title":"Pear"},{"title":"Banana"}];

我基本上试图让它看起来像这样：https://gyazo.com/9877c7ae75c3d0f2425c31642e48cc01

干杯

Answer 1

你可以这样做：我写了一些评论来解释我的意思：

<!DOCTYPE html>
<html>
<head>
<title>Assessed Assignment A8</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="fruits.js"></script>
</head>
<body>

<ul id="containers"></ul>

</body>
</html>

在你的fruits.js中：

document.addEventListener('DOMContentLoaded', function() { // wait for content to load in order to be sure you can select your dom nodes
    var items = [{"title":"Apple"},{"title":"Orange"},{"title":"Pear"},{"title":"Banana"}];
    var myListElement = document.getElementById('containers'); // select your DOM - list element
    for (prop of items) { // traverse your object items
       myListElement.innerHTML += '<li>'+prop.title+'</li>'; // add listitems containing the values from the item object
    }
});

获取一系列对象并以选择的形式将其放入iframe中

1 个答案: