Insert text after an tag

Question

I try to insert text after an <img> tag using javascript.

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

If I use document.getElementById('candy').innerHTML = "test"; the image disappears.

Can you help me?

He did not specify that he wanted to use jQuery. – Charlie May 05 '13 at 16:35 — Charlie, May 05 '13 at 16:35
@Allendar OP hasn't mentioned using any framework – Popnoodles May 05 '13 at 16:35 — Popnoodles, May 05 '13 at 16:35

score 6 · Answer 1 · edited May 23 '17 at 10:25

6

That's because you're replacing the innerHTML with the text test. You're not appending the text.

Try:

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

Taken from here.

edited May 23 '17 at 10:25

Community

answered May 05 '13 at 16:33

Charlie

Applying this to the OP's example markup the result will be `Insert text here!test` so it will work only once, and only if there isn't any text in the div beforehand. – JJJ May 05 '13 at 16:41
2

I assumed that the text: `Insert text here!` would be nonexistent, and then the JS would you know, insert the text there :) – Charlie May 05 '13 at 16:42

score 1 · Answer 2 · answered May 05 '13 at 16:34

1

Well, the img tag is part of the HTML inside the div, and if you replace the div's HTML you rewrite the img tag as well.

Perhaps you wanted something like this instead:

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

answered May 05 '13 at 16:34

JJJ

Is there something more "properly", I mean a function like `lastChild` ? – mathieu_b May 05 '13 at 16:35
Sure, `var children = document.getElementById('candy').childNodes; var lastChild = children[ children.length - 1 ];` but it's not any more "proper" than a named span. – JJJ May 05 '13 at 16:39

score 0 · Answer 3 · answered May 05 '13 at 16:37

0

Use

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

answered May 05 '13 at 16:37

Tamil Selvan C

score -4 · Answer 4 · answered May 05 '13 at 16:34

-4

That is because you javascript changes the html inside the <img> tag to test. This doesn't work as <img /> is a self-closing tag.

I believe you could you jQuery to do what you are trying to however.

answered May 05 '13 at 16:34

Irfan Mir

4 Answers4