How to insert HTML content without overwrite the default content with JS

Question

I have footer code below. I want to add some html content (see below) but if I do it, the default content disappear. I want to keep default content and add the new one. How to do that?

<div id="footer">
HTML content and some classes
</div>

And my code to add another HTML content with classes:

<script>
document.getElementById('footer').innerHTML = '<div class="bannery"><img class="obrazek" src="URL"></div>';
</script>

Thank you :-)

Added [this answer](https://stackoverflow.com/a/51432177/157247) to the dupetarget, as it didn't have the obvious answer. — T.J. Crowder, Jul 19 '18 at 21:47

score 3 · Answer 1 · answered Jul 19 '18 at 21:28

3

Try this : document.getElementById('footer').innerHTML += '<div class="bannery"><img class="obrazek" src="URL"></div>'; That should work

answered Jul 19 '18 at 21:28

CodePerson71495

69
1
4

4

Issue with this is if there is event handlers, you remove them. – epascarello Jul 19 '18 at 21:28
It is supposed to add inject HTML to the element with the footer id – CodePerson71495 Jul 19 '18 at 21:29
Usually works for me – CodePerson71495 Jul 19 '18 at 21:29
3

It will add it, just saying there are side effects to this solution. – epascarello Jul 19 '18 at 21:30

How to insert HTML content without overwrite the default content with JS

1 Answers1