javascript 使用jquery.html()插入html

zf2sa74q  于 2023-06-04  发布在  Java
关注(0)|答案(8)|浏览(158)

我想将一大块html插入到一个预先存在的<td>中。我使用这个方法:

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

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

fnx2tebb

fnx2tebb1#

我建议把html统一成一个字符串。。像这样。

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

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

这样你就可以看到你的html在哪里崩溃了,它为JavaScript创建的内容增加了很多可读性。
还有...
如果您希望保留此TD中的内容,我将使用append() jquery方法。
jquery documentation是你最好的朋友!

lbsnaicq

lbsnaicq2#

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>
k7fdbhmy

k7fdbhmy3#

我要做的是把所有的HTML放入一个div中,如下所示:<div id="myHTML" style="display: none;">LOTS OF HTML HERE</div>然后当这样做:

$("td#content").html($("#myHTML").html());
  • 问题可能是换行。如果你有一个字符串(包含在“”或“”中),那么你会发现换行符会“打断”你的代码...所以你必须把所有的HTML放在一行上。*
hc2pp10m

hc2pp10m4#

Stefan是对的,但是要用引号来回答你的问题,不要忘记转义任何会破坏它的东西,所以如果你有html("<a href='#' onclick='dofunction("text")'>...etc...");,它需要是html("<a href='#' onclick='dofunction(\"text\")'>...etc...");,这样双引号就不会被逐字地读出来。

nx7onnlm

nx7onnlm5#

如果引号破坏了你的代码,试试这个...
$("td#content").html("<a href=\"http://www.example.com\">my link</a>");
引号没有转义。只要在HTML代码中的任何引号(双引号或单引号)前添加反斜杠即可。应该可以了;)

2exbekwf

2exbekwf6#

如果它来自一个链接,你可能会想用 AJAX 来做:

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

但是,请记住,如果您试图从不同域的站点中提取HTML,则需要使用服务器代理和所有这些东西......有点超出了问题的范围。

hs1ihplo

hs1ihplo7#

你可能应该用jquery创建元素,而不是在一个大字符串中。如果只是使用一个大字符串,就无法确定dom的正确性,而且几乎不可能进行调试或修改。
这类似于手工构建XML。只是这不是最好的方式。

ssm49v7z

ssm49v7z8#

你也可以使用重音符号(`),像这样:

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

相关问题