标签：for back 建议 font 设置 stc insert creat 临时
㈠添加元素的步骤
⑴创建空元素
⑵设置关键属性
⑶将元素添加到DOM树
㈡创建空元素
var elem = document.createElement(‘table‘);
示例：
var table = document.createElement(‘table‘);
var tr = document.createElement(‘tr‘);
var td = document.createElement(‘td‘);
var td = document.createElement(‘td‘);
console.log(table);
㈢设置关键属性
a.innerHTML = "go to tmooc"
a.herf = "http://tmooc.cn";
<a href = "http://tmooc.cn">go to tmooc</a>
㈣设置关键样式
a.style.opacity = "1";
a.style.csssText = "width:100px;height:100px";
㈤将元素添加到DOM树
第一种方法：
parentNode.appendChild(childNode)
可用于将为一个父元素追加最后一个子节点
示例：
var div = document.createElement(‘div‘);
var txt = document.createTextNode(‘版权声明‘)；
div.appendChild(txt);
document.body.appendChild(div);
第二种方法：
parentNode.insertBefore(newChild,existingChild)
用于在父元素中的指定子节点之前添加一个新的子节点
示例：
<ul id = "menu">
<li>首页</li>
<li>联系我们</li>
</ul>
var ul = document.getElementById(‘menu‘);
var newLi = document.createElement(‘li‘);
ul.inserBefore(newLi,ul.lastChild);
㈥添加元素优化
①尽量少的操作DOM树
①为什么?
每次修改DOM树，都导致重新layout
⑴如果同时创建父元素和子元素时，建议在内存条中先将子元素添加到父元素，再将父元素一次性挂到页面
⑵如果只添加多个平级子元素时，就要将所有子元素，临时添加到文档片段中。再将文档片段整体添加到页面
②文档片段中：内存中，临时保存多个子元素的虚拟父元素。用法和普通父元素完全一样
如何？
⑴创建片段
var frag = document.createDocumentFragment();
⑵将子元素临时追加到frag中
frag.appendChild(child);
⑶将frag追加到页面
parent.appendChild(frag);
强调：append之后，frag自动释放，不会占用元素
标签：for back 建议 font 设置 stc insert creat 临时
原文地址：https://www.cnblogs.com/shihaiying/p/11638576.html
