javascript 如何存储 HTML 片段并稍后将其插入到文档中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9210961/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to store a HTML snippet and insert it later in the document?
提问by David Morales
Is there a way to store a HTML snippet in a variable using Javascript or jQuery like this? (obviously it's a non-working an example)
有没有办法像这样使用Javascript或jQuery将HTML片段存储在变量中？（显然这是一个不起作用的例子）
var mysnippet = << EOF
<div class="myclass">
<div class="anotherclass">
Some dummy text
</div>
</div>
EOF
And then insert it in the document using jQuery:
然后使用 jQuery 将其插入到文档中：
mysnippet.append($('#someelement'));
EDIT:
编辑：
Please, read this before answering of commenting:What I have is a raw HTML snippet inside my JS file, and I need to store it in a Javascript variable using something like that EOF construction. I need to avoid putting it between quotation marks.
请在回答评论之前阅读此内容：我的 JS 文件中有一个原始 HTML 片段，我需要使用类似 EOF 结构的东西将其存储在 Javascript 变量中。我需要避免将它放在引号之间。
If it's not possible using Javascript and/or jQuery, then the question has no solution.
如果无法使用 Javascript 和/或 jQuery，则该问题没有解决方案。
采纳答案by iblue
You could use javascript templates like (WARNING: Original links broken and/or lead to spam sites: ejs, haml-coffee, ...
您可以使用 javascript 模板，例如 (警告：原始链接已损坏和/或导致垃圾邮件站点：ejs、haml-coffee、...
Current links (2019-12-14): ejshaml-coffee
当前链接 (2019-12-14)： ejs haml-coffee
回答by mas-designs
Just get the HTML code of the div you want by var content = $('#somediv').html();and then append it to some div later on ! $('#otherdiv').append(content);
只需获取您想要的 div 的 HTML 代码，var content = $('#somediv').html();然后将其附加到某个 div 之后！$('#otherdiv').append(content);
$().html();delivers the HTML Content of that div. documentation: http://api.jquery.com/html/
$().html();提供该 div 的 HTML 内容。文档：http: //api.jquery.com/html/
$().append(<content>);appends the Content to a special div. documentatoin: http://api.jquery.com/append/
$().append(<content>);将内容附加到一个特殊的 div。文档：http: //api.jquery.com/append/
回答by Mathias Schwarz
You could write:
你可以写：
var mysnippet = "<div class='myclass'>"+
"<div class='anotherclass'>"+
"Some dummy text"+
"</div>"+
"</div>";
and then insert is using the appendfunction (which takes the snippet as argument).
然后 insert 正在使用该append函数（它将代码片段作为参数）。
回答by Farmor
Yes. Fiddle example
是的。小提琴示例
JavaScript
JavaScript
var html = '<b>Bold</b>'
$('.anotherclass').append(html);
HTML
HTML
<div class="myclass">
<div class="anotherclass">
Some dummy text
</div>
</div>
回答by osahyoun
Unfortunately nothing like << EOFis available. Here's one solution:
不幸的是，没有类似的东西<< EOF可用。这是一种解决方案：
$el = $('<div />')
.addClass('myClass')
.append(
$('<div />')
.addClass('anotherclass')
.text('Foo Bar')
);
回答by Serge
Thinking on the same issue I have found this discussion. What I have in mind is to put a hidden textarea, containing the html, and then retrieving the html from there.
思考同样的问题，我发现了这个讨论。我的想法是放置一个textarea包含 html的 hidden ，然后从那里检索 html 。
Thus there will be no conflicts with doubled DOM ids, since textareacontent isn't rendered as html.
因此不会与双倍 DOM id 冲突，因为textarea内容不会呈现为 html。
回答by thehappycheese
For those who come across this as I have...
You may wish to use the new
<template>tag in HTML5.
It still doesn't store the HTML in the JavaScript unfortunately :(
对于那些像我一样遇到这种情况的人...您可能希望<template>在 HTML5 中使用新
标签。不幸的是，它仍然没有将 HTML 存储在 JavaScript 中:(
