使用javascript/jquery用html填充div

Question

这是我的问题:

我有一个div:

<div id="legend"></div>

我想在某些条件下用其他代码填写它:

<p>Showing results....
    Key:
    <img src="/....">&lt;=1
    &nbsp;<img src="/...">&lt;=2
    &nbsp;<img src="/...">&lt;=3
    &nbsp;<img src="/...">&lt;=4
    &nbsp;<img src="/...">&lt;=5

<p>

正如你所看到的,这是一个传说,我认为主要的问题是我有双引号,不能轻易使用例如这里的解决方案: 用文本填充div

谢谢你的帮助!

Answer 1

根据我的理解,你正试图做这样的事情:

$("#legend").text("Your HTML here");

要插入HTML,你应该使用.html(),但是如此使用Vanilla JS会更有效:

document.getElementById('legend').innerHTML = "Your HTML here";

现在,您还提到了双引号的问题.那么,有两种可能的解决方案.

1:在字符串周围使用单引号:'<img src="/..." />'
2:转义引号:"<img src=\"/...\" />"

还有一件事:如果这些新行实际上是要插入的HTML,则不能在JavaScript中使用多行字符串.你也有两个选择:

1:逃离换行符:

"<p>\
    Hello, world!\
</p>"

2:连接:

"<p>\n"
    +"Hello, world!\n"
+"</p>"

Answer 2

根据您的条件(我们不知道)将您的html代码组装在变量中,然后使用html()它将其设置为元素.

var yourHtml = "your html";
$("#legend").html("yourHtml");

至于处理引号,您可以在变量中使用单引号,例如:

var yourHtml = '<img src="/yourimgr.png">';

或者你可以逃避双引号:

var yourHtml = "<img src=\"/yourimgr.png\">";