JavaScript 元素的插入顺序以及动态加载js

*****************记录下今天的心得*****************

1.元素的插入顺序

需求：异步从后台读取两个数据a和b，并动态加载到父容器x中，要求a必须在b的左边

实际情况：一开始是用x.append(...)的方法将a、b添加进去，由于是异步加载，查询速度快的请求自然会先显示在页面中的左边，于是最终列表中，a、b是忽左忽右的。

解决办法：使用 a.prependTo(x) 函数，应该好理解，就是始终把a插入到x的最前面。

2.动态加载js

需求：页面加载完毕后，设置页面控件的一些属性。前端的同事做好的静态页面，是在html末尾加上该段代码

$(function(){
    $("[data-toggle='tooltip']").tooltip();
})

实际情况：页面上的dom元素都是通过jquery异步请求后台后动态加载的，以上代码在文档载入完毕就执行了,而此时页面的相关dom元素还未创建。

解决办法：想办法让这段代码在dom元素创建完毕后执行，于是想到了动态js，在</body>前增加一个div

<div id="div1"></div>

在创建dom的jquery代码后，加上这一段

var scriptStr="$(function(){$(\"[data-toggle='tooltip']\").tooltip(); })";
//在需要的顺序中加载这段js代码
$("#div1").html("<br><script>"+scriptStr+"<\/script>");

大功告成

• 
• 大小: 1.7 KB

• 查看图片附件