JS中appendchild，innerHTML，JQ中append和appendTo用法1. appendChild(

1. appendChild(Node)

这个方法一般是在指定元素节点的最后一个子节点之后添加节点，但如果Node是页面中的DOM对象，那么就不是添加节点了，就是直接Move节点。只能传一个节点，且不直接支持传字符串【需要 appendChild(document.createTextElement('字符串'))代替】，返回追加的 Node 节点；

若 appendChild() 的参数是页面存在的一个元素，则执行后原来的元素会被移除；

例如：document.getElement("a").appendChild(document.getElementByIdx("b"))，执行后，b 元素会先被移除，然后再添加到 a 中。

var node=document.createElement("LI");
var textnode=document.createTextNode("Water");
node.appendChild(textnode);

2.innerHTML()

添加的是纯字符串，不能获取内部元素的属性；不同于 appendChild 添加到的是 dom 对象，返回的也是 dom 对象，可以通过 dom 对象访问获取元素的各种属性。进行写操作时：是将之前的dom元素区内容全部删除后重新添加该内容

进行添加元素标签时：直接加载dom元素最后

var element= document.querySelector('#box');
element.innerHTML="<h1>111</h1>";
console.log(element.innerHTML)// <h1>111</h1>;

3. append(content)

功能是向指定的元素中追加内容，被追加的content参数，可以是字符、HTML元素标记，还可以是一个返回字符串内容的函数。可以同时传入多个节点或字符串，没有返回值；

 $("#appendH3").append("<p>追加的内容</p>")

4. appendTo：

使用格式是：
$(content).appendTo(selector); 参数content表示需要插入的内容，参数selector表示被选的元素，即把content内容插入selector元素内，默认是在尾部。把所有匹配的元素追加到另一个指定的元素元素集合中。实际上，使用这个方法是颠倒了常规的$ (A).appendTo(B)的操作，即不是把B追加到A中，而是把A追加到B中。

$("#beP").appendTo("#myDiv");

append()前面是被插入的对象，后面是要在对象内插入的元素内容。

appendTo()前面是要插入的元素内容，而后面是被插入的对象。

（3.4.参考博客：jquery中append()和appendTo()的区别)