什么情况下从Javascript输出HTML代码是可接受的？

Question

我看到了一段JavaScript代码，其中程序员添加了类似于以下内容的东西：

html = " 
        <div class='hidden-context-menu'>
          <ul><li><a class='select-all'>All</a></li>
              <li><a class='select-none'>None</a></li>
               ...
               ...
               ...
          </ul>
        </div>
 "

接着，在网站的其他部分，这段代码被使用并渲染在页面中。

output_html(html);

我假设，考虑到这个特定的隐藏上下文菜单示例，开发人员可能不想重复自己的代码...这种做法是受鼓励的还是应该被视为错误的方法？

- Rdpi

---

你的例子与通过js对象实例化和添加/插入元素并没有太大的区别。我想决定因素是字符串包含的html数量以及该结构是否可以更容易地通过js对象和一些循环过程来定义？ /2分钱编辑：我的主要关注点将是SEO影响。 - Brandt Solovij

这总是可以接受的，但不一定是最好的方式。 - Diodeus - James MacFarlane

我认为尽可能将HTML与JavaScript分开是更好的做法（有时很难坚持这个规则）。 - m1.

我已经多年没有做过测试了，但上次尝试时，通过HTML解析器构建DOM比多次调用document.createElement快大约10倍。如果您正在创建成千上万个节点，请记住这一点。 - Mike Christensen

Answer 1

以这种方式输出HTML，未来可能会导致很多头痛的问题，原因与CSS应该是外部的相同：难以找到、与无关代码混在一起，并且通常会导致不必要的重复。

如果您被告知使用的框架需要它，或者如果先前的开发人员在代码中大量使用了它，那么实际上没有太多可以做的事情。

编辑：以下代码将执行相同的功能，并且在未来更容易操作。

var div = document.createElement("div");
div.className = "hidden-context-menu";

var ul = document.createElement("ul");

var li = document.createElement("li");
var a = document.createElement("a");
a.className = "select-all";
li.appendChild(a);
ul.appendChild(li);

var li = document.createElement("li");
var a = document.createElement("a");
a.className = "select-none";
li.appendChild(a);
ul.appendChild(li);

div.appendChild(ul);

顺便说一下，正如上面的帖子所说，Javascript不应该是输出HTML的唯一机制；HTML页面应该负责这个！但在“Web应用程序”中使用它是可以的。

- Jeffrey Sweeney

---

另一个这种方法的好处是，如果您需要遍历DOM，那么创建的元素将是可访问的，并且它们不会在OP的代码中。 - Evert

Answer 2

我认为依赖JavaScript来生成HTML可能是一个不好的想法。如果用户在浏览器中关闭了JavaScript，那该怎么办呢？

我认为更常见的做法是使用服务器端脚本（比如PHP）来生成HTML。客户端收到的页面与不使用PHP，开发人员手动输入HTML的情况下是一样的。

- Travesty3

---

对于动态Web应用程序，输出HTML是可以的。然而，将所有内容放入一个字符串中似乎非常不直观，因为存在用于元素创建的函数。 - Jeffrey Sweeney

新一代框架，如EXT.JS使用JavaScript在客户端呈现所有UI界面。 - Diodeus - James MacFarlane

@JeffreySweeney：我认为，必要时使用元素创建是可以的，但如果只需通过简单地键入HTML就能实现完全相同的功能，那么使用元素创建并不是个好主意。再次问一下...如果用户在浏览器中关闭了JavaScript呢？那么元素将不会被生成，而如果他们只是输入它，那么元素就可以被正常显示。而且对于客户端的功能来说，两者是完全相同的。 - Travesty3

@Travesty3同意。这就像是只支持Flash的网站一样过时了。 - Jeffrey Sweeney

最佳实践要求您的网站无论如何都应该正常工作，而JavaScript可以用来增强用户体验。除了懒惰、预算或者可恶的市场营销部门不理解和给您时间以外，没有任何理由不这么做。 - Chris Sobolewski

Answer 3

这代码真是太糟糕了...他们应该使用一个更好的变量名，而不是'html'。

至于错误的方法--在一些浏览器中直接修改可能会出现问题，如果它是一个XHTML页面。如果它不是动态生成的，你通常最好将它插入到其余的HTML中，并在需要时使用CSS来隐藏/显示它。

对于钻取菜单类型的功能，我通常会在初始CSS中保留它的显示状态，然后在页面加载时使用JavaScript将其隐藏--这样，如果JS关闭，他们只有完全展开的菜单，而不是无法访问较低级别的内容。如果您使与当前页面相关的菜单部分展开，您就不必这样做，这只意味着当他们转到每个页面以获取所需内容时需要更多的点击。

在您的情况下，由于锚点没有“href”，我猜这些元素只有在JavaScript打开时才能正常工作，因此我认为通过JS插入它没有任何问题。(至于插入HTML与按元素进行操作...如果是HTML而不是XHTML，我对插入字符串没有任何问题，因为我发现它更容易维护...如果它实际上将成为HTML文件中的一部分，我认为更有理由将其保留为HTML字符串)

- Joe