html - 创建不被浏览器解析的 HTML 代码(以供重用)

Question

我有一段 HTML 代码，我想在整个页面中重复使用。

        <div class="gmail-message-container">
            <span class="trim-text">
                <span class="gmail-sender">
                    some.email@some.domain (Some Name)
                </span>:
            </span>
            <br>
            <b><span class="trim-text gmail-title">Some title</span></b>
            <br>
            <span class="trim-text gmail-summary">Some summary text goes here</span>
        </div>

如何使 gmail-message-container 充当未显示的 html 元素，并且可以被 JavaScript 抓取并附加到多个位置？

该元素被分配了某些 CSS 规则，这些规则会根据容器内元素的数量影响该元素，因此我不能只执行 display: none;，因为它将计入我的元素试图复制。

Answer 1

用于此类目的的常见模式是使用

<script type="text/template" id="template">
// your html goes here
</script>

text/template阻止浏览器解析 <script> 的内部标签(你可以使用不同的东西，只需要不使用 text/javascript 即可)

稍后您可以使用 document.getElementById('template').innerHTML 获取您的模板