jQuery append function not working in Internet Explorer 8

Question

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

possible duplicate of [Problem with HTML Parser in IE](http://stackoverflow.com/questions/301484/problem-with-html-parser-in-ie) — Ravi Gadag, Mar 27 '13 at 07:17
are you doing synchronously this inside the body tag? if so, try wrapping it in `$(document).ready(function(){/* here... */});` — Kris, Mar 27 '13 at 07:19

score 3 · Answer 1 · answered Mar 27 '13 at 07:26

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>");
});

I think this is the solution, because it's saying you can't append to the body until it's closed, and so it's probably executing the code where ever it is in the document, which very like before the closing
. The OP is trying to add content to an element that's still being rendered. — CWSpear, Mar 27 '13 at 07:35

score 3 · Answer 2 · answered May 30 '13 at 22:47

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

elclanrs · Answer 3 · 2013-03-27T07:32:59.273

1

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.

edited Mar 27 '13 at 07:32

answered Mar 27 '13 at 07:27

elclanrs

92,861
21
134
171

You are absolutely right, but I feel like we need to learn to walk before we can... walk faster. I think Zaheer has actually got to the root of the problem in this case. I say this, ya know, not having access to IE8... =) – CWSpear Mar 27 '13 at 07:37
1

Yeah I guess... This was more of a "how to do it better" rather than finding a solution to the actual problem. The point I'm making is that is not worth solving OPs problem because that code is dirty and will lead to more dirty problems. – elclanrs Mar 27 '13 at 07:39

jQuery append function not working in Internet Explorer 8

3 Answers3

Linked