使用javascript / jquery用html填充div [英] Fill div with html using javascript/jquery

问题描述

这是我的问题：

我有一个div：

 < div id =legend>< / div> 
  

我希望在某些条件下使用其他代码填写它：

 < p>显示结果.... 
键：
< 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 / p>

感谢您的帮助！

解决方案

根据我的理解，你是试图做这样的事情：

  $（＃legend）。text（你的HTML在这里）; 
  

要插入HTML，您应该使用 .html（），但如果只使用 Vanilla JS 会更有效率：

  document.getElementById（'legend'）。innerHTML =你的HTML在这里; 
  

现在，您还提到双引号存在问题。好吧，有两种可能的解决方案。

1：在字符串周围使用单引号：'< img src =/ ... />'

2：退出报价：< img src = \/ ... \/>

还有一件事：如果要插入的HTML实际上是这些换行符，则不能有多行字符串JavaScript的。您也有两种选择：

1：退出换行符：

 < p> \ 
 Hello，world！\ 
< / p> 
  

2：连接：

 < p> \ n
 +Hello，world！\ n
 +< / p> 
  

here is my problem:

I have a div:

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

and I want to fill it, under certain conditions, with this other code:

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

As you can see this is a legend and the main issue I think is that I have double quotes that cannot be easily included using for instance the solution here: Fill div with text

Thanks for your help!

解决方案

By my understanding, you are trying to do something like this:

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

To insert HTML, you should use .html(), HOWEVER it would be far more efficient to just use Vanilla JS like so:

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

Now, you also mention having problems with double-quotes. Well, there are two possible solutions.

1: Use single-quotes around your string: '<img src="/..." />'
2: Escape the quotes: "<img src=\"/...\" />"

And one more thing: If those newlines are actually in your HTML to insert, you can't have a multi-line string in JavaScript. You have two options here too:

1: Escape the newline:

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

2: Concatenate:

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

这篇关于使用javascript / jquery用html填充div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！