javascript - 在不更改 DOM 的情况下在 Javascript 中呈现 HTML

Question

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

假设我有一个自定义 HTML 标记“location”，我想以某种方式呈现它，而不实际改变 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