使用 jquery .html() 插入 html

Question

我想将一大块 html 插入到预先存在的 中。我正在使用这个方法：

 $("td#content").html(LOTS_OF_HTML_CODE_HERE);

但是它不起作用。我是一个菜鸟，HTML 块中有很多引号和 ' 似乎破坏了它。这样做的正确方法是什么？

Answer 1

您可能应该使用 jquery 创建元素，而不是使用大字符串。如果你只使用一个大字符串，你就无法确定 dom 的正确性，并且几乎不可能调试或修改。

这类似于手动构建 xml。这只是不是首选的方式。

Answer 2

您还可以使用重音符号 (`)，如下所示：

$("#menu").html(`
    
Options:
<a href="main.html">Home</a> | 
<a href="list.html">List</a> |
Add |
Options |
<a href=# id="logout">Logout</a>
         
`);

Answer 3

我建议将 html 统一为一个字符串......就像这样。

htmlStr = "";
htmlStr += "<p>some paragraph";
htmlStr += "<p>another paragaraph</p>";

$("#content").html(htmlStr);

这样你就可以看到你的 html 哪里出了问题，并且它为 javascript 创建的内容增加了很多可读性。

另外...

如果您想保留此 TD 中的内容，我将使用 append() jquery 方法。

---

jquery 文档 是您最好的朋友！

Answer 4

Javascript 对多行字符串或 HEREDOC 语法没有很好的支持，但有一些解决方法。

在每行末尾添加一个反斜杠“\”，让脚本引擎知道您正在继续下一行而不完成：

<script>
var my_html = '\
    <div id="my-div">\
        <span>Name:</span> Your Name\
    </div>\
';
</script>

使用 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>

Answer 5

我要做的是将所有 HTML 放入 div 中，如下所示：

LOTS OF HTML HERE那么什么时候执行此操作：

$("td#content").html($("#myHTML").html());

问题可能是换行符。如果你有一个字符串（用“”或“”括起来），那么你会发现换行符会“破坏”你的代码......所以你必须将所有 HTML 放在一行上。

Answer 6

Stefan 是对的，但是要用引号回答你的问题，不要忘记转义任何可能会破坏它的内容，所以如果你有 html("...等等..."); 它需要是 html(";...etc..."); 以便双引号不按字面意思读取。

Answer 7

如果引号破坏了您的代码，请尝试以下操作...

$("td#content").html("我的链接< /a>");

引号没有被转义。只需在 HTML 代码中的任何双引号或单引号前添加反斜杠即可。应该可以做到这一点。 ;)

Answer 8

如果它来自链接，您可能需要使用 AJAX 来完成：

$("#YOUR_ELEMENT").load("THE_CONTENT_TO_LOAD");

但是，请记住，如果您尝试从不同域上的站点提取 HTML，则需要使用服务器代理等东西......有点超出了问题的范围。