innerHTML与jquery里的html()区别介绍

雨点打透心脏的1/2处 2022-05-26 09:41 186阅读 0赞

内容为转载  
原文链接：[http://www.jb51.net/article/31548.htm][http_www.jb51.net_article_31548.htm]  
这篇帖子写的很好我在将json数据发送到前台，然后将数据镶嵌到table表格里出现了问题，开始用的是innerHTML,数据不能在页面显示，但是console.log(data)可以，后来改用html(),数据可以正常显示。  
以下播客为原文内容：  
原文链接：[http://www.jb51.net/article/31548.htm][http_www.jb51.net_article_31548.htm]

var tbody=document.createElement('tbody'); 
    tbody.innerHTML='<tr><td>IE下tbody的innerHTML是只读的</td></tr>'; //在IE下报错，目标对象错误

现在用jquery的html试试， 
    代码如下:
    $(tbody).html('<tr><td>IE下tbody的innerHTML是只读的</td></tr>');

发现IE下用jquery能正确显示了，没任何问题。  
后来查阅资料才知道，原来IE下tbody、tr这些的innerHTML都是只读的，不允许写入，而在其他浏览器下则没问题。

而jquery里是用了try，catch来检测，如果报错则在catch里重新调用this.empty().append(value)，是通过append来添加字符串的。

jquery 如何使用innerHTML

("\#responsediv") 是个Jquery对象，它Val()是对Value属性赋值对它无意义，Jquery没有innerHTML这个属性，应该这样写 ("\#responsediv") 是个Jquery对象，它Val()是对Value属性赋值对它无意义，Jquery没有innerHTML这个属性，应该这样写 (“\#responsediv”)\[0\].innerHTML=msg 就可以获得这个Dom对象使用innerHTML。

今天将json数据从后台，循环到html页面的table表格里，开始用innerHTML不能显示，改为html(data),正常显示  
html代码：

页面

异步请求：

$.ajax({
               type:"get",
               url:"/mavenweb/customer/hts.do",
               dataType:"json",
               success:function (data) { 
                   alert(data);
                   var str = "";
                   $.each(data,function (i,obj) { 
                        str += "<tr>" +
                                "<td>"+obj.cust_id+"</td>"+
                                "<td>"+obj.cust_name+"</td>"+
                                "<td>"+obj.cust_address+"</td>"+
                                "</tr>"
                   })
               $("#tbody-result").html(str)
    
               }
           });

controller代码

// 点击按钮循环显示出所有数据到html页面
        @RequestMapping("/customer/hts")
        @ResponseBody
        public List<Customer> htms(){
            List<Customer> customerList = customerService.getCustomerList();
            System.out.println(customerList);
            return customerList;
        }

[http_www.jb51.net_article_31548.htm]: http://www.jb51.net/article/31548.htm