dom节点原生的append、appendChild方法

小剧情

lily给我消息了,让我过去,准没好事,崛地而起冲过去。项目某个页面在企业微信中打开,页面表单元素失灵了。一个巴掌是拍不响的,种种小情节导致躁脾气蠢蠢欲动,人有时脾气是要撒出去的,不然影响健康。

怼了个开场白,避免干仗,转头去趟CC(WC昵称),回到案发现场,儒雅的那个我又回来了,看着Lily也可爱多了。携带诚意表达自己的态度,我回去仔细排查,出结果告诉她,lily也热心给提供线索。

问题面前更需要平常心,bug的出现,必定是没有按照相关语言的套路出牌。

企业微信没有调试工具,在正常浏览器里又是正常的,这个时候杀手锏是必要的,逐块、关键行添加alert,一定会找到想要的答案。

调试到第四次,找到了关键模块,进到模块中,逐行排查,范围缩小到四行代码。盯着代码,append、appendChild,这是个老项目用的jquery,这个地方我是在dom节点上使用的原生的append,一贯用的appendChild,就是这里了,改成appendChild果然正常运作。

先部署生产环境,不耽误lily进度。

然后有了下边的内容。

ParentNode.append 方法

ParentNode.append 方法在 ParentNode的最后一个子节点之后插入一组 Node 对象或 DOMString 对象。
被插入的 DOMString 对象等价为 Text 节点。

与 Node.appendChild() 的差异:

(1)ParentNode.append()允许追加 DOMString 对象,而 Node.appendChild() 只接受 Node 对象。

(2)ParentNode.append() 没有返回值,而 Node.appendChild() 返回追加的 Node 对象。

(3)ParentNode.append() 可以追加多个节点和字符串,而 Node.appendChild() 只能追加一个节点。

dom节点原生的append、appendChild方法

以上来自MDN

剧情分析

调试一下,查看企业微信中内嵌浏览器版本如下:
dom节点原生的append、appendChild方法
我机器上的chrome版本如下:

dom节点原生的append、appendChild方法
53—>84之间差了有几个世纪了,这也就解释了为什么机器上的chrome没有问题,企业微信里就不行。

???? 不懂就要挖,狠狠挖,挖到底就明白啦!

一起挖起来!!!!