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

抓取模板

Answer 2

您可以将其放在script代码中。

<script id="your-template-id" type="text/template">
    <div class="gmail-message-container">
        ....      
    </div>
</script>

浏览器不知道text/template的含义是什么，也不解析它。您可以通过id获取此模板的内容，例如：

var tpl = document.querySelector('#your-template-id').innerHTML;

这种方法用于某些js框架，如Backbone。

====

您还可以使用html5标记template，并且明确设计用于保存模板。

Answer 3

一种可能的解决方案：

将它放在容器外面的隐藏div中，该div具有ID：

<div id="message_template" style="display:none">
    <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>
</div>

然后使用Javascript将隐藏div的内容克隆到容器中。

JQuery解决方案：

var newItem = $("#message_template").find(".gmail-message-container").clone();

newItem.appendTo($("yourcontainer"));

其中yourcontainer是容器的选择器，它将包含.gmail-message-container项。

另一个解决方案与上面的解决方案非常相似，就是将其指定为模板：

将您的代码段指定为模板：

<script type="text/html" id="your-template-name">
    <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>
</script>

var template = document.querySelector('#your-template-name').innerHTML;

创建未被浏览器解析的HTML代码（供重用）

3 个答案: