DOM添加

㈠添加元素的步骤

⑴创建空元素

⑵设置关键属性

⑶将元素添加到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自动释放，不会占用元素

巴特西

DOM添加

最新文章

热门文章