how to append to a object with innerHTML

Question

Is there a way to add information to a DOM object with .innerHTML without replacing what exists there?

For example: document.getElementById('div').innerHTML = 'stuff';

Would return <div id="div">stuff</div>

And then a similar call: document.getElementById('div').innerHTML = ' and things';

Would set the div to <div id="div">stuff and things</div>

Answer 1

The += operator.

Answer 2

change it to this:

document.getElementById.innerHTML('div') = 
    document.getElementById.innerHTML('div') + ' and things';

the ol' x = x+1 style of concatenation.

though I don't think "document.getElementById.innerHTML('div')" is even proper syntax? Don't you mean "document.getElementById('divid').innerHTML"?

Answer 3

Maybe:

document.getElementById('div').innerHTML = document.getElementById('div').innerHTML + ' and things'

Answer 4

There are mistakes in your examples. But you could just do this:

var myDiv = document.getElementById('div');

myDiv.innerHTML = myDiv.innerHTML + ' and things';

Answer 5

document.getElementById('mydiv').innerHTML = 'stuff'
document.getElementById('mydiv').innerHTML += 'and things'
document.getElementById('mydiv').innerHTML += 'and even more'

Answer 6

why not try

document.getElementById('div').innerHTML += ' and things';

note the "+"