JavaScript-节点操作

三种动态创建元素的区别

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

区别：

1. document.write 是直接将内容写入页面的内容流，但是文档流执行完毕后在执行它的话，它会导致页面全部重绘- - -页面其他内容没有了，只有新创建的内容
2. innerHTML 是将内容写入某个 DOM 节点，不会导致页面重绘
3. innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
4. creatElement() 创建多个元素效率稍低一点点，但是结构更清晰

总结：不同浏览器下，innerHTML 效率要比 creatElement() 高

inn(erHTML 方式创建元素

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