<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function add() {
var jdata = ['aaaaa','bbbb','ccc'];
var docnew =document.createDocumentFragment();
for (var i =0; i < jdata.length; i++) {
var li = document.createElement("li");
li.innerText = jdata[i];
docnew.appendChild(li);
}
//一次渲染
document.querySelector("ul").appendChild(docnew);
}
</script>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<button onclick="add()">addd</button>
</body>
</html>
这样写的好处是
1,保留原来dom结构
2,内存中增加临时dom,一次性添加html,渲染一次
