在<img/>标记后插入文字

Question

我尝试使用javascript在<img>标记后插入文字。

<div id="candy"><img src="candy.png" /> Insert text here!</div>

如果我使用document.getElementById('candy').innerHTML = "test";，图像就会消失。

你能帮助我吗？

Answer 1

这是因为您正在使用文字innerHTML替换test。您没有附加文字。

尝试：

var div = document.getElementById('candy');
div.innerHTML = div.innerHTML + 'test';

取自here。

Answer 2

嗯，img标签是div内部HTML的一部分，如果你替换div的HTML，你也会重写img标签。

也许你想要这样的东西：

<div><img src="candy.png" /> <span id="candy">Insert text here!</span></div>

Answer 3

使用

var div = document.getElementById('candy');
div.insertAdjacentHTML('beforeend', 'test');

参考：https://developer.mozilla.org/en/docs/DOM/element.insertAdjacentHTML

Answer 4

那是因为你javascript更改了<img>标签内的html进行测试。这不起作用，因为<img />是一个自动关闭标记。

我相信你可以jQuery去做你想做的事。