亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

冷門Javascript API——element.insertAdjacent

系統 4040 0

John Resig(jQuery的作者)在2008年的時候曾經嘗試將elment.insertAdjacentHTML引入jQuery,不過他最終放棄了。主要原因在于:

  • 其在IE6中不支持向table,tbody,thead或者tr插入html,否則會拋出錯誤。
  • 不支持XML文檔。

不過當時,這一由IE4.0開始出現的接口已經進入了HTML5的接口名單,將會有更多瀏覽器實現該接口,下面便是目前桌面瀏覽器的支持情況:

?

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 8.0 (8.0) 4.0 7.0 4.0 (527)

?

但是,我們為什么會關注這一接口呢?

?

比element.innerHTML更好的性能

測試結果表明,element.insertAdjacentHTML在大部分情況下有比element.innerHTML更好的性能:

http://jsperf.com/insertadjacenthtml-perf/4

這可能是比Document Fragments更好的HTML文檔插入方案,因為我們知道Document Fragments在某些IE版本中的表現比較糟糕(看來IE的實現方式和別的都不太一樣啊……)。

這給我們得模板優化提供了可行而簡易的方案。

好吧,那element.insertAdjacentHTML這接口怎么用呢?

?

在指定位置插入HTML

element.insertAdjancentHTML(position, html)

需要傳入字符串參數position,以及字符串參數html代碼。我們可以對照jQuery的HTML插入方法,得到這一position的對照關系:

.insertAdjacentHTML("beforeBegin", ...) ?—— ?before

.insertAdjacentHTML("afterBegin", ...) ?—— ?prepend

.insertAdjacentHTML("beforeEnd", ...) ?—— ?append

.insertAdjacentHTML("afterEnd", ...) ?—— ?after

即:

beforeBegin:在該元素前插入

afterBegin:在該元素第一個子元素前插入

beforeEnd:在該元素最后一個子元素后面插入

afterEnd:在該元素后插入

?不過,當元素是空的時候,其和innerHTML就可以很相像了,比如:

      
        var
      
       menu = document.createElment("div"
      
        );
menu.insertAdjacentHTML(
      
      "afterEnd"
      
        ,
    
      
      "<p>Hello world!</p>");
    

這里就和menu.innerHTML('<p>Hello world!</p>')是一樣的。

?

總結?

主要還是看需求。由于我們的項目可以不考慮IE6,所以IE6的問題就不是問題了。而且模板引擎不會插入XML Document,所以第二個問題也不是問題了。

?

參考資料

DOM insertAdjacentHTML ?.?John Resig

element.insertAdjacentHTML ?. MDN

?

冷門Javascript API——element.insertAdjacentHTML


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 色综合国产 | 91精品国产免费久久国语麻豆 | 中文字幕在线观看一区 | 国产在线看片护士免费视频 | www.日日操| 久久婷婷五色综合夜啪 | 亚洲系列中文字幕一区二区 | 国产精品久久久久影院色 | 日韩免费毛片视频 | 成人欧美在线观看免费视频 | 黄色成人在线网站 | 五月天免费在线视频 | 99热精品久久 | 午夜国产精品久久影院 | 日本一级毛片aaaaa | 男人资源网站 | 日本爱情动作片网址 | 国产 欧美 日产中文 | 国产97公开成人免费视频 | 中文字幕免费在线看线人动作大片 | 日本一级毛片免费播 | 一级毛片q片| 国产一区二区免费在线 | 国产成人精品免费视 | 在线黄色.com| 狠狠狠狼鲁欧美综合网免费 | 精品国产综合区久久久久99 | 亚洲精品中文字幕不卡在线 | 天天干夜夜谢 | 成人免费视频国产 | 国产精品免费看香蕉 | 亚洲三级视频在线 | 9久热久re爱免费精品视频 | 中文字幕日韩在线观看 | 一级女人18片毛片免费视频 | 久久乐国产综合亚洲精品 | 久久国产免费 | 国产精品视频第一区二区 | 在线播放亚洲视频 | 中文字幕日本精品一区二区三区 | 欧美韩国日本在线观看 |