jquery - html模板标签和jquery

Question

我遇到过这种情况，我正在尝试使用 <template>我的 html 源代码中的标记:

<template id="some-id">
  <div id="content-container">
    <span>{{some_string}}</span>
  <div>
</template>

这最终将模板放置在文档中，但它不被认为是在 DOM 中。这意味着在支持模板标签的浏览器中找不到 $("#content-container")。如果我搜索:

$("#some-id")

我得到了这个:

<template id=​"some-id">​
  #document-fragment
    <div id="content-container">
      <span>{{some_string}}</span>
    <div>
</template>​

这一切都不让我吃惊。我需要知道如何做的是克隆文档片段的内容并拥有一个新节点，然后我可以将其粘贴到我想要的 DOM 中。

我已经找到了如何在不使用 jQuery 的情况下执行此操作的示例，但是围绕这些内容的大部分代码已经在使用 jQuery，我需要知道如何使用 jQuery 来执行此操作。

我的第一个想法是获取 html，然后使用它来创建一个新节点:

stuff = $("#some-id").html()
new_node = $(stuff)

这会导致以下错误:

Error: Syntax error, unrecognized expression: <the html string>

我不知道这个错误是不是由 mustache 语法引起的。我认为在某处必须有针对此行为的 jQuery 解决方案，但是当我使用 Google 进行搜索时，我得到了大量不同的 jQuery 模板的匹配项。

有没有人有想法、答案或指向可以帮助我解决这个问题的站点/页面的指示？我正在努力避免拼凑一些骇人听闻的东西。

编辑:我最终找到了这个解决方案(我仍在测试它以确保它是一个解决方案，但它看起来很有希望)；

template = $("#some-id")
content = template.html()
new_div = $("<div></div>")
new_div.html(content)

我最终得到了包含 div 的内容，我以前并不真正需要它，但我可以接受它。但是这种感觉很笨拙。有人对此有更好的方法吗？好处是它仍然可以在尚未完全适应模板标签行为的浏览器中工作。

谢谢!

Answer 1

尝试:

var myTemplate = $("#some-id").html().trim();
var myTemplateClone = $(myTemplate);