HTML和JS代码分离的主要作用有以下几点：

1. 代码复用：分离HTML和JS代码可以提高代码的复用性。开发者可以将相关的HTML和JS代码分别编写，然后在需要的时候一起使用，避免重复编写相同的代码。

2. 代码独立性：分离HTML和JS代码可以提高代码的独立性。每个部分都有自己的作用域和生命周期，因此它们可以在不同的部分之间独立地修改和控制。

3. 代码维护性：分离HTML和JS代码可以提高代码的维护性。开发者可以更容易地查找和修改相关的代码，因为它们不会混杂在一起。此外，当需要更新某个部分的代码时，只需要更新相应的HTML和JS代码，而不会影响到其他部分。

4. 测试更方便：分离HTML和JS代码可以提高测试的便利性。开发者可以在测试代码中只关注与HTML和JS代码相关的部分，而不会考虑其他部分。这可以更快地找到和修复代码问题。

5. 代码更易读：分离HTML和JS代码可以提高代码的易读性。当JavaScript代码变得很长或者复杂时，读起来可能会很困难。通过分离代码，可以更清晰地看到各个部分的作用，从而更容易理解代码。