appendChild也是异步函数（给dom添加子节点后，第一次修改dom样式不生效）

目录

一、问题

二、原因及解决方法

三、总结

一、问题

1.在已有dom上添加子节点son，并在添加后把son移动到合适的位置。但是发现第一次修改son的样式不生效，打印后竟然发现：获取到的dom高度 clientHeight 第一次竟然是错误的（clientWidth一直正确）；导致第一次渲染的位置和之后的渲染都不一样。。。。

2.代码

let setStyle=()=>{
 let dom=$('#parent')[0];
 let son=`<div>子节点<img :src="${img}"/></div>`;
 dom.appendChild(son);
 son.setAttribute('style',`position:absolute;top:${300- 
                dom.clientHeight};left:${300-dom.clientWidth}`)
}

二、原因及解决方法

1.原因：appendChild竟然是一个异步方法。添加async await改成同步的即可。

2.代码

let setStyle=async()=>{
 let dom=$('#parent')[0];
 let son=`<div>子节点<img :src="${img}"/></div>`;
 await dom.appendChild(son);
 son.setAttribute('style',`position:absolute;top:${300- 
                dom.clientHeight};left:${300-dom.clientWidth}`)
}

三、总结

1.真的就很难以置信。当你在写代码时发现有些时候正确，有些时候不正确时，在检查逻辑无误的情况下，需要考虑异步的问题。

2.appendChild竟然是异步的，长见识了！

3.终于解决了，长叹一口气，继续敲代码，节日快乐！

/*

希望对你有帮助！

如有错误，欢迎指正，非常感谢！

*/