什么时候可以从 Javascript 输出 HTML 代码？答案

【问题标题】：when it's acceptable to output HTML code from Javascript?什么时候可以从 Javascript 输出 HTML 代码？
【发布时间】：2012-03-07 17:51:22
【问题描述】：

我阅读了一段 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>
 "

然后，在 webapp 的其他一些部分，这段代码被使用并呈现在页面中。

output_html(html);

我认为，考虑到这个隐藏上下文菜单的具体示例，开发人员可能不想重复自己......

这种做法是被鼓励还是被认为是错误的做法？

【问题讨论】：

您的示例与通过 js 对象实例化和附加/前置元素没有太大不同。我想决定因素是字符串包含的 html 的数量，以及是否可以通过 js 对象和一些循环过程更容易地定义该结构？ /2cents 编辑：我主要关心的是 SEO 影响
这总是可以接受的，但并不总是最好的方式。
我会说最好尽可能将 HTML 与 javascript 分开（有时很难遵守此规则）。
我已经有年没有做过测试了，但上次我尝试通过 HTML 解析器构建 DOM 比调用 document.createElement a 快大约 10 倍很多次。如果您要创建数千个节点，请记住一些事情。

标签： javascript html coding-style

【解决方案1】：

我会说依靠 Javascript 来生成 HTML 可能是个坏主意。如果用户在浏览器中关闭了 Javascript 怎么办？

我认为查找由服务器端脚本（如 PHP）生成的 HTML 更为常见。客户端收到的结果页面与不使用 PHP 时的页面相同，而开发人员只是重复输入 HTML。

【讨论】：

对于动态 webapps，输出 html 就可以了。然而，当存在用于创建元素的函数时，将它们全部放在一个字符串中似乎非常违反直觉。
新一代框架，例如 EXT.JS 使用 JavaScript 渲染所有 UI 客户端。
@JeffreySweeney：我认为在必要时使用元素创建是好的，但我认为当只需键入 HTML 即可实现完全相同的功能时使用它不是一个好主意。再次，我问......如果用户在他们的浏览器中关闭了 Javascript 怎么办？然后该元素将不会生成，而如果他们只是输入它，它就会生成。并且客户端的功能将完全相同。
@Travesty3 同意。就在那里，只有 Flash 的网站。
最佳实践要求您的网站无论如何都应该正常工作，并且可以使用 javascript 来增加体验。除了懒惰、预算或您该死的营销部门不理解并给您时间做其他事情之外，没有任何理由。

【解决方案2】：

以这种方式输出 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页面应该对此负责！然而，在“webappy”应用程序中这很好。

【讨论】：

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

【解决方案3】：

多么可怕的代码……他们应该使用比“html”更好的变量名。

至于错误的方法——如果它是一个 XHTML 页面，在某些浏览器中存在直接修改的问题。如果它不是动态生成的，通常最好将它与 HTML 的其余部分一起插入，并在需要时使用 CSS 隐藏/显示它。

对于向下钻取菜单类型功能，我通常将其与初始 CSS 一起显示，然后让 JavaScript 在页面加载时将其隐藏——这样，如果 JS 关闭，它们只有完全展开的菜单，而不是无法访问较低级别的东西。如果您这样做是为了扩展与当前页面相关的手册部分，则您不必这样做，这只是意味着当他们转到每个页面以访问他们正在寻找的内容时会获得更多点击。

在您的情况下，由于锚点没有“href”，我猜测这些元素仅在打开 JavaScript 时才起作用，所以我真的认为通过 JS 插入它没有问题。（至于插入 HTML 与按元素进行......如果它是 HTML，而不是 XHTML，我插入字符串没有问题，因为我发现它更容易维护......如果它实际上是在 HTML 文件中，我说还有更多的理由将其保留为 HTML 字符串）

【讨论】：