DOM学习之如何添加元素（节点）

推测，添加应该有两种类型，

一种是创建的新的、在DOM树之外的元素 / 节点添加到DOM树中 ，

一种是将已存在DOM树中的元素 / 节点添加到其它元素 / 节点 。

第一种：创建新元素/节点 。

　　通过 createElement()创建新元素节点，也可通过此方法自定义标签。

　　如： let div = document.createElement('div');

　　就创建了元素div， 但此时的div元素还是文档碎片状态，并未在DOM树中。

　　通过createTextNode创建文本节点，

　　如： let  txt = document.createTextNode('我歌且谣');

　　就创建了一个文本节点，也是存在于文档碎片状态，并未在DOM树中，但却可以和文档碎片状态　　　　　　　　　　       的元素进行直接操作。好比于二者同时在DOM树中，拥有DOM属性。

 

第二种： 将已经存在的元素/节点 添加到其它元素/节点中

　　1、添加子元素 / 节点 appendChild()  方法

　　2、在一个元素前 / 后 添加元素 / 节点（不管是兄弟还是父子）

　　　　(换言之，将一个节点添加到一个节点之前 或 将一个节点添加到一个节点之后）

　　　　// 简而言之， 排列两个节点的前后顺序

　　　　父元素 . insertBefore(文档位置靠前的节点， 文档位置靠后的节点)

　　3、 使用属性innerHTML  可以向DOM树添加删除、修改查询节点，

　　　　不论是元素节点还是文本节点。

　　　　使用innerHTML 的节点，是通过它添加修改删除节点的父元素。

　　　　增删改： div . innerHTML = '<div><p>我歌且谣</p></div>'。

　　　　同时，此属性可实现向某个节点前后添加节点。

　　　　添加到之前： div . innerHTML = 新添加节点 + div . innerHTML 

　　　　添加到之后： div . innerHTML = div . innerHTML + 新添加节点