Question

I have a function that refreshes queue of elements – each one have to be represented by div, but effect is total WTF for me. Here is the function:

this.refreshQueue = function( ) {
    $("#queue").html('');
    for( var id in self.queue ) {
        console.log('Opening div');
        $("#queue").html( $("#queue").html()+'<div class="queueelement">');
        self.appendUser( self.queue[id].data );
        console.log('Closing div');
        $("#queue").html( $("#queue").html()+'</div>');
    }
} 

this.appendUser = function( data ) {
    console.log('Appending h4');
    $("#queue").html( $("#queue").html()+'<h4>'+data.login +'</h4>' );
}

I See in firebug log:

Opening div
Appending h4
Closing div

That’s ok, but HTML after that operation looks like that:

<div class="queueelement"></div>
<h4>Somelogin</h4>

Instead of:

<div class="queueelement">
<h4>Somelogin</h4>
</div>

Any ideas what causes this ?

Early i have tried with .append() – same effect.

Answer 1

See the documentation:

This method uses the browser’s innerHTML property.

You cannot set an opening tag and later add a closing tag. The browser is correcting the opening tag by adding a closing one automatically.

You are not just setting HTML (as text), it is also parsed and DOM elements are created and inserted into the tree. To be parseable, the HTML has to be correct.

This will happen with any method you use. You can also try it in the console:

> d = document.createElement('div');
  <div>​</div>​
> d.innerHTML = '<span>';
  "<span>"
> d.innerHTML += 'foo';
  "<span></span>foo"
> d.innerHTML += '</span>';
  "<span></span>foo</span>"
> d.innerHTML
  "<span></span>foo"

You have to build the whole string and insert it at once.