Javascript 使用 jquery .html() 插入 html
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3479783/
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
Insert html using jquery .html()
提问by Rob Bennet
I want to insert a large chunk of html into a pre-existing <td>. I am using this method:
我想将一大块 html 插入到预先存在的<td>. 我正在使用这种方法：
$("td#content").html(LOTS_OF_HTML_CODE_HERE);
But it doesn't work. I am a noob, there are a lot of quotes and 'within the HTML chunk that seems to be breaking it. What is the correct method for doing this?
但它不起作用。我是一个菜鸟，有很多引号，并且'在 HTML 块中似乎正在破坏它。这样做的正确方法是什么？
回答by Derek Adair
I would suggest unifying the html into one string... like so.
我建议将 html 统一为一个字符串......就像这样。
htmlStr = "";
htmlStr += "<p>some paragraph";
htmlStr += "<p>another paragaraph</p>";
$("#content").html(htmlStr);
this way you can see where your html is breaking down and it adds a lot of readability to javascript created content.
通过这种方式，您可以看到您的 html 在哪里分解，并为 javascript 创建的内容增加了很多可读性。
Also...
还...
if there is content in this TD that you'd like to keep, I would use the append()jquery method.
如果您想保留此 TD 中的内容，我将使用append()jquery 方法。
the jquery documentationis your best friend!
在jQuery的文档是你最好的朋友！
回答by totels
Javascript doesn't have good support for multi-line strings or HEREDOC syntax, but there are a few workarounds.
Javascript 对多行字符串或 HEREDOC 语法没有很好的支持，但有一些解决方法。
Add a backslash "\" to the end of each line to let the script engine know you are continuing onto the next line without finishing:
在每一行的末尾添加一个反斜杠“\”，让脚本引擎知道你没有完成就继续到下一行：
<script>
var my_html = '\
<div id="my-div">\
<span>Name:</span> Your Name\
</div>\
';
</script>
Use an XML CDATA hack(http://mook.wordpress.com/2005/10/30/multi-line-strings-in-javascript/):
使用 XML CDATA hack（http://mook.wordpress.com/2005/10/30/multi-line-strings-in-javascript/）：
<script>
var my_html = (<r><![CDATA[
<div id="my-div">
<span>Name:</span>Your Name
</div>
]]></r>).toString();
</script>
回答by Thomas Clayson
What I would do is to put all of that HTML into a div as per: <div id="myHTML" style="display: none;">LOTS OF HTML HERE</div>then when do this:
我会做的是将所有的 HTML 放入一个 div 中：<div id="myHTML" style="display: none;">LOTS OF HTML HERE</div>然后什么时候这样做：
$("td#content").html($("#myHTML").html());
What could be the problem is line breaks. If you have a string (enclosed in "" or '') then you will find that line breaks will "break" your code... so you'll have to put all the HTML on one line.
可能的问题是换行符。如果你有一个字符串（用 "" 或 '' 括起来），那么你会发现换行符会“破坏”你的代码……所以你必须把所有的 HTML 放在一行上。
回答by Robert
Stefan is right, but to answer your question with quotes, don't forget to escape anything that would otherwise break it, so if you have html("<a href='#' onclick='dofunction("text")'>...etc...");it needs to be html("<a href='#' onclick='dofunction(\"text\")'>...etc...");in order for the double quotes to not be read literally.
Stefan 是对的，但是用引号回答你的问题，不要忘记转义任何会破坏它的东西，所以如果你有html("<a href='#' onclick='dofunction("text")'>...etc...");它html("<a href='#' onclick='dofunction(\"text\")'>...etc...");，为了不按字面意思阅读双引号。
回答by Robert
If quotes are breaking your code, try this...
如果引号破坏了你的代码，试试这个......
$("td#content").html("<a href=\"http://www.example.com\">my link</a>");
$("td#content").html("<a href=\"http://www.example.com\">my link</a>");
The quotes are not being escaped. Just add a backslash before any quotes, double or single within your HTML code. That should do it. ;)
引号没有被转义。只需在 HTML 代码中的双引号或单引号之前添加反斜杠即可。应该这样做。;)
回答by Trafalmadorian
If it's coming in from a link, you'll probably want to do it with AJAX:
如果它来自一个链接，你可能想用 AJAX 来做：
$("#YOUR_ELEMENT").load("THE_CONTENT_TO_LOAD");
However, keep in mind if you're trying to pull HTML from a site on a different domain you'll need to use server proxies and all that stuff...kind of out of the scope of the question.
但是，请记住，如果您尝试从不同域中的站点提取 HTML，您将需要使用服务器代理和所有这些东西......有点超出了问题的范围。
回答by Stefan Kendall
You should probably be creating your elements with jquery, rather than in a big string. You get no certainty of dom correctness if you just use a big string, and it's near impossible to debug or modify.
您可能应该使用 jquery 创建元素，而不是使用大字符串。如果只使用大字符串，则无法确定 dom 的正确性，而且几乎不可能调试或修改。
This is similar to building xml by hand. It's just not the preferred way of doing it.
这类似于手动构建 xml。这只是不是首选的方式。
