javascript - jQuery append function not working in Internet Explorer 8 - Stack Overflow

admin管理员组

文章数量:1292584

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 (patible; 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

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 (patible; 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

• javascript
• jquery
• internet-explorer-8
• append

Share Improve this question Follow edited Mar 27, 2013 at 7:16 Ashwin asked Mar 27, 2013 at 7:06 AshwinAshwin 12.4k2222 gold badges8484 silver badges119119 bronze badges 4

• remove the $ (), just add the string of elements – Bhadra Commented Mar 27, 2013 at 7:08
• that was a typo in this question, corrected it. – Ashwin Commented Mar 27, 2013 at 7:12
• possible duplicate of Problem with HTML Parser in IE – Ravi Gadag Commented Mar 27, 2013 at 7:17
• 1 are you doing synchronously this inside the body tag? if so, try wrapping it in $(document).ready(function(){/* here... */}); – Kris Commented Mar 27, 2013 at 7:19

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

you need to do this after page load pleted (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>");
});

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

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.

本文标签： javascriptjQuery append function not working in Internet Explorer 8Stack Overflow