創建未被瀏覽器解析的HTML代碼（供重用）

我有一段HTML代碼，我想在整個頁面中重複使用。創建未被瀏覽器解析的HTML代碼（供重用）

 <div class="gmail-message-container"> 
      <span class="trim-text"> 
       <span class="gmail-sender"> 
        [email protected] (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作爲一個沒有被顯示，並可以由JavaScript來抓住並添加到多個地方html元素？

元素被分配了某些CSS規則，這些規則會根據容器內部元素的數量來影響元素，因此我不能僅僅執行display: none;，因爲它會計入我嘗試複製的元素中。

來源

2016-06-14 Božo Stojković

@apokryfos仔細看問題：「我不能只顯示：無;「 – beerwin

在容器中做'style ='display：none;''。不要讓自己難過。 – apokryfos

您可能需要考慮模板引擎，例如http://handlebarsjs.com/或https://github.com/janl/mustache.js –

用於上述目的的通用模式是使用

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

text/template防止瀏覽器解析<script>標籤的內部（你可以使用不同的東西，它只是要求不使用text/javascript這樣做）

您可以通過使用document.getElementById('template').innerHTML

來源

2016-06-14 09:53:55 pwolaq

這似乎是一種解決許多其他問題的方法。謝謝！ –

您可以將它放在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，您可以使用，它是明確設計爲容納模板。

來源

2016-06-14 09:53:47

一個可能的解決方案後搶你的模板：

將其放置在容器外部的一個隱藏的DIV，它有一個ID：

<div id="message_template" style="display:none"> 
    <div class="gmail-message-container"> 
     <span class="trim-text"> 
      <span class="gmail-sender"> 
       [email protected] (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"> 
       [email protected] (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;

來源

2016-06-14 10:01:41 beerwin

創建未被瀏覽器解析的HTML代碼（供重用）

回答

相關問題