insertBefore不生效的坑，关乎lastChild

划重点，这次的坑是需要：确定要在哪个元素前进行插入操作，确定这个元素是否是你的目标节点。（不要你以为是就是，打印出来瞧瞧）

• 需求在div#qrCodeWrap中两个<p>之间再插入一个<p>。
• 上代码

html

<div>
    <div class="mask-layer" ></div>
     <div class="pay-open stud bg7 " id="qrCodeWrap">
         <p class="t-center pad55 "> 请展示此二维码</p>
         <p class="t-center mar22" > 扫描后点击此处</p>//

      </div>
</div>

js部分

var qrCode = document.createElement('p');
qrCode.id = 'qrCode';
qrCode.setAttribute("class",'t-center');
qrCode.innerHTML = “二维码”；
qrCodeWrap.appendChild(qrCode);
qrCodeWrap.insertBefore(qrCode,qrCodeWrap.lastChild);

结果：并没有在两个p元素中间展示，而是在最后面插入了。inserrtBefore的坑在这里，qrCodeWrap.lastChild。事实上这个lastChild 并不是我要的目标p。这么看来。坑好像是lastChild的。

<div>
    <div class="mask-layer" ></div>
     <div class="pay-open stud bg7 " id="qrCodeWrap">
         <p class="t-center pad55 "> 请展示此二维码</p>
         <p class="t-center mar22" > 扫描后点击此处</p>
         <p class="t-center " id=“qrCode” > 二维码</p>
      </div>
</div>

解决方案：
打印了div#qrCodeWrap所有的子元素，发现最后一个节点并不是 p元素。
于是去除DOM中的空行，空格。
html

<div>
    <div class="mask-layer" ></div>
     <div class="pay-open stud bg7 " id="qrCodeWrap">
         <p class="t-center pad55 "> 请展示此二维码</p>
         <p class="t-center mar22" > 扫描后点击此处</p><!--注意下面没有空行了，也不要存在任何空格-->
      </div>
</div>

结果：实现需求，在两个P元素中插入了新的P元素

<div>
    <div class="mask-layer" ></div>
     <div class="pay-open stud bg7 " id="qrCodeWrap">
         <p class="t-center pad55 "> 请展示此二维码</p>
         <p class="t-center " id=“qrCode” > 二维码</p>
         <p class="t-center mar22" > 扫描后点击此处</p>
      </div>
</div>

很简单的一个操作，花了很久。

经典语录：很多时候我以为我以为的并不是我以为的