我有一段 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;
,因为它将计入我的元素试图复制。
最佳答案
用于此类目的的常见模式是使用
<script type="text/template" id="template">
// your html goes here
</script>
text/template
阻止浏览器解析 <script>
的内部标签(你可以使用不同的东西,只需要不使用 text/javascript
即可)
稍后您可以使用 document.getElementById('template').innerHTML
获取您的模板
关于html - 创建不被浏览器解析的 HTML 代码(以供重用),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37808464/