jQuery append function not working in Internet Exp

问题:

Here is my code-

$("body").append("<div>" +
                        "<ul>" +
                            "<li>" +
                                "<a href='javascript:void(0)' onclick='add()'>Add</a>" +
                            "</li>" +
                            "<li>" +
                                "<a href='javascript:void(0)' onclick='edit()'>Edit</a>" +
                            "</li>" +
                            "<li>" +
                                "<a href='javascript:void(0)' onclick='delete()'>Delete</a>" +
                            "</li>" +
                        "</ul>" +
                    "</div>");

In IE8 I am getting following error - Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
Timestamp: Wed, 27 Mar 2013 07:03:53 UTC

Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
Line: 0
Char: 0
Code: 0

回答1:

you need to do this after page load completed (because IE8 takes time to render and JavaScript get executed):

$(document).ready(function()
{
   $("body").append("<div>" +
                    "<ul>" +
                        "<li>" +
                            "<a href='javascript:void(0)' onclick='add()'>Add</a>" +
                        "</li>" +
                        "<li>" +
                            "<a href='javascript:void(0)' onclick='edit()'>Edit</a>" +
                        "</li>" +
                        "<li>" +
                            "<a href='javascript:void(0)' onclick='delete()'>Delete</a>" +
                        "</li>" +
                    "</ul>" +
                "</div>");
});

回答2:

for me append didn't work if the element to append was a input. For other elements work.

Example

<td id="V_DepTOTd"><input type="text" id="V_DepTO" /></td>

didn't work

$("#V_DepTO").append("`<input type='hidden' id='elementSelected' />`");

js error: unexpected call method or property acces

work

$("#V_DepTOTd").append("`<input type='hidden' id='elementSelected' />`");

Tested in IE8 and jquery.min.js 1.9.1

回答3:

My advice, dump that code, that's going to be terrible to maintain. Plus append takes raw HTML. Try this I think "proper" approach:

// All your functions organized in an object
var actions = {
  add: function() {  },
  edit: function() {  },
  delete: function() {  }
};

// Generate necessary html
var items = [];
for (var a in actions) {
  items.push('<li data-item="'+ a +'"><a href="#"></a></li>');
}

// Handle events 
var $items = $(items.join('')).click(function(e) {
  e.preventDefault(); // similar to "javascript:void"
  actions[$(this).data('item')]();
});

// Append to DOM
$('body').append($('<div><ul></ul></div>').find('ul').append($items)));

That will be much easier to maintain because it's all dynamic now. I would suggest using meaningful classes as well for your items, ie. "edit", "add", "delete", so you can target them in CSS more easily.