Question

I have a function that gets some notifications, loops through them and the adds them to a div using Jquery’s prepend function. The important part looks like this

var myDiv = setNotificationDiv(notif.id, notif.title, notif.message, notif.sentDate, notif.readDate);
$('#leftContent').prepend(myDiv);

The setNotificationDiv uses Array.join to create a div that contains all the notification information and returns a string

function setNotificationDiv(id, title, message, sentDate, readDate){
    var temp = [];
    temp.push("<div class='notification'><input type='hidden' value='");
    temp.push(id);
    temp.push("' name='id'/><h2>");
    temp.push((title.length > 23 ? title.substring(0,23).concat('...') : title));
    temp.push("</h2><div class='inlineNotification'><p id='sent'>Sent: ");
    temp.push(formatDate(sentDate));
    temp.push("</p>");
    temp.push((readDate != null ? "<img id='read' src='content/images/readNotification.png'/>" : "<img id='read' src='content/images/unreadNotification.png'/>"));
    temp.push("</div><a href='#' class='deleteNotification'><img src='content/images/deleteNotification.png'</a></div>");
    var str = temp.join('');
    return str;
}

The problem is that in IE, all that is being added is this for each notification:

<img src="http://localhost:8080/content/images/deleteNotification.png" a="" <=""/>

But in every other browser I tested (Chrome, Firefox and Opera), the notification div looks just like it should. I have no idea why IE does this operation so differently.

Any help would be greatly appreciated

Thanks

Answer 1

The issue is malformed HTML. Firefox and chrome tend to automatically close any missing close tags on HTML elements, but IE will not.

Here is your issue:

<img src='content/images/deleteNotification.png'</a>

It should be:

<img src='content/images/deleteNotification.png' /></a>