创建未被浏览器解析的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