Question

I’m having an odd issue with jquery append method in Google Chrome where it is not writing a closing tag when the element is empty but will if the element contains a character.

If I use this code:

$('#workZone .canvas').each(function(i) {
        $(this).append('<canvas id="test"></canvas>');
    });
}

I get this in the markup:

<canvas id="test">

If I use this code:

$('#workZone .canvas').each(function(i) {
        $(this).append('<canvas id="test">i</canvas>');
    });
}

the I get what I’d expect to get in the markup:

<canvas id="test">i</canvas>

I’d like the closing tag, obviously, but without having to include the throwaway character. What is going on?

Here is a test case on jsfiddle: http://jsfiddle.net/YSDnk/

Thanks!

Tim

Answer 1

Try this:

$(this).append('<canvas id="test"><!-- //comment --> </canvas>');

You should put a html comment in empty spaces.
This way the closing tag will show.