原生JS 模拟jQuery html()方法

在上周写的博客中,百分比的进度条提示本来也想用原生的JS来实现实时的更改HTML的内容, 比如在上篇博客中我本来打算用innerHTML的属性实时更替loadingPage中的数字,但是在试图用原生代码实现中innerHTML在Safari下问题很多:首先列举下我测试出的问题, 有几个地方也有点不明白,

  1. 如果更改一次内容的话, innerHTML的属性在Safari下也是可以赋值的, 正常使用,但是多次赋值后就不行,比如这里的load_num

  2. 在网上搜了下大家普遍反映在Safari下innerHTML有这个问题, 有人用DOM节点的方式在Safari中操作HTML内容(An alternative workaround for Mobile Safari’s innerHTML problem),但这个方法至少我用着不太好,而且在这个方法中还要引入HTMLparser, 想用原生JS实现jquery中html()方法就是不想引入jquery,zepto之类的库,引入其他的插件也已经不是我初衷了,况且这种方法好像也不是很奏效,也有帖子说在Safari下延时设置HTML中的内容有效(Problems with Safari and innerHTML) 但不知道是不是我没有领会其奥义,在应用到我的loadingpage中依旧无效
    3.在loadingpage进度条提示这个应用中,只有zepto的html方法在Safari和手机端(iPhone)是正常使用。

以上问题我试图使用原生JS来模拟jquery的html()方法, 源码解析有好几篇帖子,如jQuery源码-dom操作之jQuery.fn.htmljQuery源码—html()的实现原理 但我现在还没有完全摸透其逻辑, 已经看了一晚上还是没整明白, 现在搞清楚的就是在innerHTML无效的情况下, jquery也是选择用node节点的方式来操作, 但其jquery的框架较宏大, 一时半会还不能完全模拟出轻量级的类似方法, 先放着, 吃个饭,回来再琢磨~

    原文作者:囧囧
    原文地址: https://segmentfault.com/a/1190000003797678
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞