Solution to the problem of jquery's selector under ie7 that causes append to fail_jquery

1, there is a piece of html as follows

Copy code The code is as follows:

2. I use jquery to dynamically fill in the content under tbody. The code is as follows

Copy code The code is as follows:

$("#pending table tbody").empty().append(th).append(html);

This code will have problems in ie7 and below ie versions. jquery cannot find the correct dom position and append the content through #pending table tbody. It needs to be modified. The modified code is as follows

Copy code The code is as follows:

$("table tbody").empty().append(th).append(html);

Remove #pending and find dom directly through table tbody

3. I was confused for a while. Cascading selectors are very common, but why is there such a problem under IE7? Is it a jquery bug or the HTML writing method of nested table tbody under div is not standard enough?

Let me continue to add:

Things to note when using jquery append in IE

$(document).ready(function() {
   $.ajax({
     url: 'Cutepage.htm',
     dataType: 'json',
     data: 'type=Init&PageSize=' + EachPage + '&PageIndex=1',
     success: function(msg) {

      //在IE7下无法显示,在火狐下没有问题。。。。。
      $('#Content').append('<tr><td width="19%"> 商品编号</td><td width="15%">商品名字</td><td width="20%">供应商商编号</td><td width="30%">商品种类编号</td><td width="10%">单价</td></tr>');

     },
    error: function(x) { alert("服务器错误代码:" + x.status); $('#Loading').hide(); }
   });
 });

Modification (below):

$(document).ready(function() {
   $.ajax({
     url: 'Cutepage.htm',
     dataType: 'json',
     data: 'type=Init&PageSize=' + EachPage + '&PageIndex=1',
     success: function(msg) {

      //修改后...（这样就没有问题了,可以看出Jquery对html标签是比较敏感的，以后需要注意........） 
      var pageContent = '';  
       pageContent += '<table border="2">';
       pageContent += '<tr><td width="19%"> 商品编号</td><td width="15%">商品名字</td><td width="20%">供应商商编号</td><td width="30%">商品种类编号</td><td width="10%">单价</td></tr>';
       pageContent += '</table>';      
       $('#Content').append(pageContent );

     },
    error: function(x) { alert("服务器错误代码:" + x.status); $('#Loading').hide(); }
   });
 });

Copy the content to a parameter, do not use html content directly.

jQuery’s append method does not support HTML attributes such as connections

I was very depressed. I was writing a program today and wanted to append some HTML to the document object, such as

. These were no problem at all, but I encountered HTML with links such as:

Copy code The code is as follows:

$("#test").append("test");

There is no problem with firefox, but IE6, IE7 and IE8 are stuck, and only text content is displayed without any connections. I was preparing to Google, but I found that I could no longer log in to Google.com. Basically, the page I found on Google.cn was full of junk articles from collection sites, which was very depressing. After working on it for a long time, I found an article that said it was a problem with jQuery's own append function. This function has its own statements similar to HTML parsing and analysis. Basic HTML is fine, but it encounters links or tags that are not completely closed or are customized. Tags, jQuery just can't recognize them. I don’t know if this is really the case. The js library I have is a compressed version. It’s too late and my head is dizzy and I don’t want to look at the source code of Laoshizi anymore. Just create an element of the a tag and insert it directly, like this:

Copy code The code is as follows:

$(document.createElement(‘a’)).attr({"href":"#", "id": '#mylink'}).appendTo("#test");

Then attach content to this link:

Copy code The code is as follows:

$(‘#mylink’).text("test");

Hey, are you tired? No matter, I'm going to bed. If I have time tomorrow, let's take a look at how the source code of jQuery is written.