情景描述

我刚要起身去吃晚饭，开发小哥哥让我看个问题，很着急的问题，说客户等着回复呢。什么问题呢？

在某个系统为4.4.4的安卓手机上，一个用jquery写的嵌套在app里面的h5页面样式混乱，看了看是js不执行，html的font-size设置不上，导致不会适配。

解决过程

  • 什么js不执行？立马跑去问客户端，是不是webView禁止了js，于是接到客户端给我的…
  • 那是为什么呢？把所有js代码都删掉，只alert一下，发现执行了！难道是js代码有错误吗？于是开始找错误。
  • 找到了一个错误误用了es6的语法。以为完事了，随后又发现还有错误，经过各种巴拉巴拉，错误在原生方法append上。
  • js有错误的情况下，整个js文件都会不执行，这个要命啊。

append 和 appendChild

  • ParentNode.append是一个实验中的方法，有兼容性问题，最好不要使用（jquery倒是有一个append方法可以用）
  • ParentNode.append 方法在 ParentNode的最后一个子节点之后插入一组 Node 对象或 DOMString 对象。被插入的 DOMString 对象等价为 Text 节点。

ParentNode.append 与 Node.appendChild的差异

  • ParentNode.append()允许追加 DOMString 对象，Node.appendChild() 只接受 Node 对象。
  • ParentNode.append() 没有返回值，而 Node.appendChild() 返回追加的 Node 对象。
  • ParentNode.append() 可以追加几个节点和字符串，而Node.appendChild() 只能追加一个节点。
1
2
3
4
5
6
7
var parent = document.createElement("div");
var p = document.createElement("p");
parent.append("Some text", p);

var parent = document.createElement("div");
parent.append("Some text");
parentNode.appendChild(document.createTextElement('Some text'));