jQuery append function not working in Internet Explorer 8
10,703
Solution 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>");
});
Solution 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
Solution 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.
Author by
Ashwin
Updated on June 05, 2022Comments
-
Ashwin almost 2 years
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
-
CWSpear about 11 yearsI 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 </body>. The OP is trying to add content to an element that's still being rendered.
-
CWSpear about 11 yearsYou 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... =)
-
elclanrs about 11 yearsYeah 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.