append、appendChiid、removeChild和 innerHTML

append：可以同时传入多个节点或字符串，没有返回值。即可以直接传入标签＋元素。

appendChiid：只能传入一个节点，且不支持传字符串，返回Node节点。所以它的使用通常要结合.createdElement

innerHTML：传入的是纯字符串，不能获取内部元素的属性；不同于 appendChild 添加到的是 dom 对象，返回的也是 dom 对象，可以通过 dom 对象访问获取元素的各种属性。

removeChild：在Javascript中，只提供了一种删除节点的方法：removeChild()。 removeChild() 方法用来删除父节点的一个子节点。

 

解析1：

innerHTML 比 appendChild 要方便，特别是创建的节点属性多，同时还包含文本的时候；
但执行速度的比较上，使用 appendChild 比 innerHTML 要快，特别是内容包括 html 标记时，appendChild 明显要快于 innerHTML，这可能是因为 innerHTML 在铺到页面之前还要对内容进行解析才能铺到页面上，当包含 html 标记过多时， innerHTML速度会明显变慢。

解析2：

1、innerHTML：获取对象的起始位置到终止位置的全部内容,包括Html标签（不包含本身标签，outerHTML包含标签本身和内容，因此它只能获取和追加同级元素）。innerHTML可以赋值（覆盖），如果要追加要先获取到原有的innerHTML

2、innerText：获取对象的起始位置到终止位置的内容, 但它去除Html标签（纯文本内容）。

3、innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText。如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：

document.getElementById('test').innerHTML.replace(/<.+?>/gim,'')

 解析3：

appendchild和removeChild

创建元素

var p = document.createElement('p');
var node = document.createTextNode("hello world");
p.appendChild(node);
var ele=document.getElementById('div1');
ele.appendChild(p)

先创建一个<p>元素

再创建内容

再将内容添加到<p>元素内 。

然后找到要添加的地方的位置，

将<p>标签添加进去。

删除元素

var ele=document.getElementById('div');
var child=document.getElementById('div-child');
ele.removeChild(child)

找到要删除的子元素，找到其父元素，删除。