在不更改 DOM 的情况下在 Javascript 中渲染 HTML答案

【问题标题】：Render HTML in Javascript without Changing the DOM在不更改 DOM 的情况下在 Javascript 中渲染 HTML
【发布时间】：2013-09-24 00:51:09
【问题描述】：

我怀疑这是可能的，但我还是会问。

假设我有一个自定义 HTML 标记“位置”，我想以某种方式呈现它，而不实际改变 DOM。

例如：<location loc-id="14" address="blah" zipcode="14" />

将呈现相当于：

<div class="location">
    <div>Blah></div>
    <div>14></div>
</div>

我知道我可以从属性中提取数据，并相应地生成新的 DOM 元素，但我想在不实际添加/编辑 DOM 的情况下这样做。

再次，我怀疑这是可能的，但我想我会问。

【问题讨论】：

DOM 是页面布局的基础。无论你做什么，你都不能改变一个而不改变另一个。
不……你不能这样做……不改变 dom……
您需要查看the X-Tag stuff。你可以（或者，至少，你很快就能做到）无需对 DOM 进行追溯性手术，我认为这就是你的意思。
你的问题让我想起了 Shadow DOM：html5rocks.com/en/tutorials/webcomponents/shadowdom
你为什么不想改变 DOM？您始终可以将内容放在 iframe 中，以便原始文档的 DOM 保持不变，而您的渲染内容则放在 iframe DOM 中。

标签： javascript jquery html css dom

【解决方案1】：

您可以使用 css :before 和 :after 伪元素来执行此操作：

<style>
  location:before {
    content: attr(address);
    text-transform: capitalize;
    display: block;
  }

  location:after {
    content: attr(zipcode);
    display: block;
  }
</style>
<location loc-id="14" address="blah" zipcode="14" />

显示为：

Blah
14

【讨论】：

这充分回答了所问的问题。谢谢！