javascript - 在不更改 DOM 的情况下在 Javascript 中渲染 HTML

Question

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

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

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

将呈现相当于：

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

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

同样，我怀疑这是否可能，但我想我会问。

Answer 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