使用javascript

Question

我使用javascript成功地将文本放在div中。但是我也想在文本中添加图像，但我的javascript方法似乎不接受这个。我正在使用以下代码：

document.getElementById("myDiv").innerHTML = "This a bit of text";

请参阅Fiddle here

在文本中添加img标签并没有奏效。任何人吗？

涡流。

如果我想添加使用以下脚本放大照片的可能性，该怎么办呢？

<div class="slider jcarousel fancybox" data-jcarousel="true" style="position: relative; width: auto; margin-top: -1px; z-index: 99;">
<ul style="left: 0px; top: 0px; width: 100%;">
<li class="product slide" style="width: auto; border: none;"><a class="zoom first" rel="" href="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" title=“Test image”><img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" alt=“Test image“ /></a>
</li>
</ul>
</div>

我如何将其置于文本中？

Answer 1

要在HTML文本中添加图片，您必须先使用\转义引号，或在属性或字符串中使用'而不是"。

如果您不这样做，那么您将在浏览器的控制台中看到错误。 这是错的： document.getElementById("myDiv").innerHTML="<img src="img.png">"//img.png is outside of the string

示例：

document.getElementById("myDiv").innerHTML="<img src=\"img.png\"/>" document.getElementById("myDiv").innerHTML='<img src="img.png">' document.getElementById("myDiv").innerHTML="<img src='img.png'/>"

您是如何尝试添加图片的？

Answer 2

您应该能够使用innerHtml插入图像。只需使用''标记代替""。

像这样：

document.getElementById("myDiv").innerHTML = 'This a bit of text <img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />';

<强> Fiddle

Answer 3

document.getElementById("myDiv").innerHTML = " <img src=' // image path ...'/>This a bit of text";

通过这种方式，您可以轻松添加图像。但请确保您使用正确的路径添加图像 或者，如果它不起作用， 在HTML中添加<img />标记。像：

<div id="myDiv"> <img src="..image path..." /> </div>

Answer 4

您不应该使用innerHTML。这是一种更好的方法：

var myDiv = document.getElementById("myDiv");
myDiv.textContent = "This a bit of text";

var myImg = new Image();
myImg.src = "http://placehold.it/100x50";

myDiv.appendChild(myImg);

<div id="myDiv">
</div>