如何存储HTML片段并在文档中插入？

Question

有没有办法像这样使用Javascript或jQuery将HTML片段存储在变量中？（显然这是一个非工作的示例）

var mysnippet = << EOF
<div class="myclass">
  <div class="anotherclass">
    Some dummy text
  </div>
</div>
EOF

然后使用jQuery将其插入文档中：

mysnippet.append($('#someelement'));

编辑:

在回答或评论之前，请仔细阅读以下内容: 我有一个原始的HTML代码片段在我的JS文件中，我希望使用类似于EOF结构的东西将其存储在Javascript变量中。我需要避免将其放在引号之间。

如果无法使用Javascript和/或jQuery，则该问题没有解决方案。

- David Morales

---

$(mysnippet).append(#someelement) - ZiTAL

由于没有合理的文件编辑器或代码检查工具可以正确地突出显示您的js文件，因此我相信将HTML放在单独的.html文件中，然后使用$.get("mysnippet.html")读取它总是更好的选择。然后，您就可以在附加之前编辑新对象的DOM。此外，HTML和JS可以轻松进行代码检查。此外，这种方法将数据与代码分离，这对于未来的可扩展性始终是一件好事。 - Sanjay Manohar

Answer 1

通过var content = $('#somediv').html();获取要获取的div的HTML代码，然后稍后将其附加到其他div中！$('#otherdiv').append(content);

$().html();提供该div的HTML内容。文档：http://api.jquery.com/html/

$().append(<content>);将内容附加到特定的div中。文档：http://api.jquery.com/append/

- mas-designs

---

我想要追加的 HTML 代码需要按照我在问题中写下的格式。它尚不存在于文档中。 - David Morales

Answer 2

你可以使用像ejs和haml-coffee这样的JavaScript模板。

- iblue

---

我标记你的答案为有效，因为似乎这是我需要做的唯一方法。例如，使用 erb（Rails 模板语言）我可以渲染一个外部 HTML 片段代码并使用 Rails 帮助程序进行转义，因此我最终可以将其存储在变量中以追加到文档中。 - David Morales

Answer 3

你可以写成这样：

你可以这样书写：

var mysnippet = "<div class='myclass'>"+
  "<div class='anotherclass'>"+
    "Some dummy text"+
  "</div>"+
"</div>";

然后使用“append”函数（该函数以代码片段作为参数）来进行插入。

- Mathias Schwarz

Answer 4

是的。示例Fiddle

JavaScript

var html = '<b>Bold</b>'
$('.anotherclass').append(html);

HTML

<div class="myclass">
  <div class="anotherclass">
    Some dummy text
  </div>
</div>

- user425367

Answer 5

很遗憾，类似于<< EOF这样的语法在此不可用。以下是一个解决方案：

$el = $('<div />')
  .addClass('myClass')
  .append(
    $('<div />')
      .addClass('anotherclass')
      .text('Foo Bar')
  );

- osahyoun

Answer 6

对于像我一样遇到这个问题的人... 您可能希望在HTML5中使用新的<template>标签。 不幸的是，它仍然无法将HTML存储在JavaScript中 :(

- thehappycheese

Answer 7

思考同一问题时，我发现了这个讨论。我的想法是放置一个隐藏的textarea，其中包含HTML代码，然后从那里检索HTML代码。

因此，不会出现DOM ID重复的冲突，因为textarea的内容不会被呈现为HTML代码。

- Serge