动态生成html性能,动态生成HTML

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

动态生成页面

有时候会有这样一个需求：在不重新加载整个页面的情况下，动态加载数据，然后变化页面的部分展示。可以另起一个frame来展示，但是对整个页面的改动就比较大了。此时可以使用1document.createElement(“XXX”)

来动态创建，展示。

示例

现在需要在一个table标签里面根据每次不同的数据，动态加载它的tbody。

首先，我们需要判断需要创建的元素是否存在，如果存在了，就需要移除，不然创建不了。需要创建的tbody id为neededBody，所以：1

2

3

4let containsBody = document.getElementById(“neededBody”);

if(containsBody){

containsBody.parentNode.removeChild(containsBody);

}

如果存在，移除过后，才创建：1

2let tbody = document.createElement(“tbody”);

tbody.setAttribute(“id”,”neededBody”);

接下来就是为tbody设值。假设需要设置的值为json格式。则可以使用循环设置：1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17targetJsonValues.forEach((value)=>{

let tr = document.createElement(“tr”);

let tdA = document.createElement(“td”);

//设值

tdA.innerHTML = value.A;

tr.appendChild(tdA);

let tdB = document.createElement(“td”);

//设置一个链接进去

let a = document.createElement(“a”);

a.setAttribute(“href”,”url”);

a.innerHTML = “I’m a href”;

tdB.appendChild(a);

tbody.appendChild(tr);

});

好了，现在表的body创建完成了，假设需要把这个body添加到id为targetTable的表中，那么可以这样写：1document.getElementById(“targetTable”).appendChild(tbody);

到这里，在ajax动态请求数据的时候，只需要将这个函数添加到请求的返回体中，将返回值传入这个函数，即可完成动态生成表的需求。

除了动态生成表，以此类推，还可以动态生成很多页面元素。

补充一点，ajax常常是异步的，但是有时候我们需要让他先执行完，才执行后面的步骤，此时可以将ajax设置成同步的：1

2

3$.ajaxSettings.async = false;

$.ajax({});

$.ajaxSettings.async = true;

注意最后要设置为true，不然后面的ajax也不是异步的了。