Question

我只是在学习如何正确使用DOM，并且正在努力使我的JavaScript与html交互。我有一个包含有关猫的信息（只是为了帮助我学习）的对象数组，我想使用HTML进行显示，我想知道什么是最佳实践。

我应该将数据和js放在一个单独的文件中到html，还是只将它们写在html文档中的脚本标签中？
有没有一种方法可以在html中使用模板文字来执行javascript，还是所有方法都必须像getelementbyid这样的方法？

非常感谢您的帮助。谢谢！

Answer 1

您有很多选择。

您可以使用jquery模板将数据绑定到HTML。数据将使用javascript，您可以使用占位符来显示该数据。
您可以使用Jquery来操作DOM并将数据放置在HTML元素中。
您可以使用某些JavaScript框架（例如KnockoutJs）将数据从javascript数据动态绑定到HTML

选择实际上取决于您的用例。如果您只需要显示只读信息，则jquery模板应该可以。使用Jquery可能最容易开始，但从长远来看，它是混乱且不可维护的。如果必须实现许多动态的数据驱动行为，请使用javascript框架。

Answer 2

您可以简单地使用cats-info id创建html div：

<div id="cats-info"></div>

然后在您的js文件中，您可以通过ID找到该标签

const catsInfo = document.getElementById('cats-info');

然后您可以创建猫名单：

const catsData = [
    {name: 'puffy', color: 'black'},
    {name: 'flipper', color: 'white'}
];

function createCatList(cats) {
    return `
       <ul>
           cats.map(cat => convertToCatItem(cat))
       </ul>
`;
}

function convertToCatItem(cat) {
 return `<li>${cat.name} - ${cat.color}</li>`;
}

并将您的列表放入您的catsInfo块；

catsInfo.innerHTML = createCatList(catsData);

可以自由提问

遍历对象数组并以HTML / DOM显示的最佳方法？

2 个答案: