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

最新推荐文章于 2022-08-07 23:59:32 发布

转载最新推荐文章于 2022-08-07 23:59:32 发布 · 91 阅读

文章标签：

本文通过实例解析了innerHTML与jQuery中的html在不同浏览器环境下的行为差异，并详细介绍了如何利用jQuery解决innerHTML只读性问题。同时，分享了如何在jQuery中安全地使用innerHTML，以及如何利用jQuery实现后加载广告的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我原本一直以为innerHTML和jquery里的html其实是完全一样的，jquery是多此一举了，直到我遇到一次问题

看个示例：

复制代码代码如下:

 
 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")[0].innerHTML=msg 就可以获得这个Dom对象使用innerHTML。

今天在这个基础上加上了一个后加载广告的方法：

代码如下：

          <div id=
          "logo_m"
          ></div>
         
          <script>
         
          function 
          doad(datastr,id){ 
         
          //getid(id).innerHTML = datastr; 这个是原生js的写法
         
          $(
          "#"
          +id).html(datastr); 
          //这个是jquery写法
         
          }
         
          /*
         
          上面的都是直接的字符串写入，不能是js代码
         
          下面的代码利用的是jquery的append加载google广告不错，百度的好像不能用。后加载百度的可以是用百度管家自带的函数。
         
          */
         
          function 
          doad2(datastr,id){ 
         
          $(
          "#"
          +id).append(datastr);
         
          }
         
          var 
          logo_m=
          '<a href="http://www.danhw.com/" target="_blank"><img src="http://files.jb51.net/image/kongbao_370.gif" width=370 height=60 /></a>'
          ;
         
          doad(logo_m,
          'logo_m'
          );
         
          </script>

百度管家自带的后加载广告的代码，基于jquery

       <div id=
       "tonglanbd"
       ></div>
      

       <script type=
       "text/javascript"
       >
      

       $.getScript(
       "http://cbjs.baidu.com/js/m.js"
       , 
       function
       () {
      

       BAIDU_CLB_fillSlotAsync(
       "广告id，不能带u"
       ,
       "tonglanbd"
       );
      

       });
      

       </script>
      