JavaScript-节点操作

三种动态创建元素的区别

1. document.write()
2. element.innerHTML
3. document.creatElement()

区别：

1. document.write 是直接将内容写入页面的内容流，但是文档流执行完毕后再执行它的话，它会导致页面全部重绘- - -页面其他内容没有了，只有新创建的内容
2. innerHTML 是将内容写入某个 DOM 节点，不会导致页面重绘
3. 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