三种动态创建元素的区别
- document.write()
- element.innerHTML
- document.creatElement()
区别:
- document.write 是直接将内容写入页面的内容流,但是文档流执行完毕后再执行它的话,它会导致页面全部重绘- - -页面其他内容没有了,只有新创建的内容
- innerHTML 是将内容写入某个 DOM 节点,不会导致页面重绘
- innerHTML 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接,字符串形式拼接会慢,数组形式拼接快一些),结构稍微复杂
字符串形式拼接,eg:
for(var i = 0; i < 1000; i++) {
li.innerHTML += '<i>我是一条随意写的文字</i>';
}
数组形式拼接,eg:
var arr = [];
for(var i = 0; i < 1000; i++) {
arr.push('<i>我是一条随意写的文字</i>');
}
li.innerHTML = arr.join(''); // 数组转成字符串
数组形式拼接更好
4. creatElement() 创建多个元素效率稍低一点点,但是结构更清晰
总结:不同浏览器下,innerHTML 效率要比 creatElement() 高
write() 方式创建元素
eg:
document.write('<h1>今天是个好天气~</h1>');
innerHTML 方式创建元素
innerHTML- - -给父元素添加内容,内容是以元素标签包含的。
eg:li.innerHTML = ‘<a href=“javascript:;”>删除</a>’;
这样添加了一个a标签
creatElement() 方式创建元素
①creatElement(‘标签名’)- - -创建空标签
②标签.innerHTML = ‘内容’- - -给标签赋予内容
③appendChild(新标签名)- - -添加元素到文档流中
eg:
<script>
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(td);
</script>
添加节点:appendChild()
父元素.appendChild(子元素)
获取孩子节点
所有内容都是节点,包括换行
元素对象.childNodes- - -获取该元素下所有子节点,包括换行等
元素对象.children- - 获取子元素,不包括换行
删除子元素:removeChild()
父元素.removeChild(子元素)
获取父元素:parentNode
子元素.parentNode