Show HTML in Javascript If else statement

Question

Possible Duplicate:
javascript - document.write error?

I have a piece of Javascript that I'm using that checks to see if a div is a certain style and then runs an if else statement:

window.onload = function () {
    if (document.getElementById('slidingDiv').style.display == 'none') {
        document.write('<a href="#show" class="show_hide"><img src="images/show-more-arrow.jpg" width="61" height="45"></a>');
    } else {
        document.write('<a href="#show" class="show_hide"><img src="images/show-less-arrow.jpg" width="61" height="45"></a>');
    }
};

This works OK, but it only shows this HTML image on the screen. I need it to add the HTML to the existing code on the page.

Many thanks

Avoid `document.write()` - http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — techfoobar, Dec 20 '12 at 13:35
When you use document.write after the page load, it replaces all of the page content. — epascarello, Dec 20 '12 at 13:41

score 7 · Answer 1 · answered Dec 20 '12 at 13:34

7

Use appendChild or innerHTML

example:

document.getElementById("elemId").innerHTML = '<a href="#show" class="show_hide"><img src="images/show-less-arrow.jpg" width="61" height="45"></a>'

answered Dec 20 '12 at 13:34

ke20

615
4
18

score 2 · Answer 2 · answered Dec 20 '12 at 13:38

2

var wrapper = document.createElement('div');
var image = document.createElement('img');
image.src='images/show-more-arrow.jpg';
wrapper.appendChild(image);

Something like this.

answered Dec 20 '12 at 13:38

Eddy Yuansheng Wu

172
1
8

+1 for not using `innerHTML`. – Cerbrus Dec 20 '12 at 13:39
innerHTML is not bad and when multiple nodes should be add, it's more performant – ke20 Dec 20 '12 at 13:42

Show HTML in Javascript If else statement

2 Answers2