append
MDN
Element.append方法在Element的最后一个子节点之后插入一组Node对象或DOMString对象。被插入的DOMString对象等价为Text节点。与Node.appendChild()的差异：
Element.append()允许追加DOMString对象，而 Node.appendChild() 只接受Node对象。
Element.append()没有返回值，而Node.appendChild()返回追加的Node对象。
Element.append()可以追加多个节点和字符串，而Node.appendChild()只能追加一个节点。
appendChild
w3school
appendChild()方法将节点(元素)作为最后一个子元素添加到元素。
MDN
Node.appendChild()方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么appendChild()只会将它从原先的位置移动到新的位置(不需要事先移除要移动的节点)。
这意味着，一个节点不可能同时出现在文档的不同位置。所以，如果某个节点已经拥有父节点，在被传递给此方法后，它首先会被移除，再被插入到新的位置。若要保留已在文档中的节点，可以先使用Node.cloneNode()方法来为它创建一个副本，再将副本附加到目标父节点下。请注意，用cloneNode制作的副本不会自动保持同步。
如果给定的子节点是DocumentFragment，那么DocumentFragment的全部内容将转移到指定父节点的子节点列表中。
有更加新的API可供使用！ > ParentNode.append() (en-US) 方法支持多个参数，接受字符串作为参数，会将字符串转换为文本节点再附加。
innerHTML
w3school
innerHTML属性设置或返回元素的HTML内容(内部HTML)。
MDN
Element.innerHTML属性设置或获取 HTML 语法表示的元素的后代。
如果一个<div>、<span>或<noembed>节点有一个文本子节点，该节点包含字符&、<或>，innerHTML将这些字符分别返回为&、<和>。使用Node.textContent可获取一个这些文本节点内容的正确副本。
如果要向一个元素中插入一段HTML，而不是替换它的内容，那么请使用insertAdjacentHTML()方法。
区别
append可以同时传入多个节点或字符串，没有返回值。
appendChild只能传一个节点，且不直接支持传字符串，需要appendChild(document.createTextElement('字符串'))代替，返回追加的Node节点；若appendChild()的参数是页面存在的一个元素，则执行后原来的元素会被移除。
innerHTML添加的是纯字符串，不能获取内部元素的属性；不同于appendChild添加到的是dom对象，返回的也是dom对象，可以通过dom对象访问获取元素的各种属性。
性能
innerHTML比appendChild要方便，特别是创建的节点属性多，同时还包含文本的时候。
但执行速度的比较上，使用appendChild比innerHTML要快，特别是内容包括html标记时，appendChild明显要快于innerHTML，这可能是因为innerHTML在铺到页面之前还要对内容进行解析才能铺到页面上，当包含html标记过多时，innerHTML速度会明显变慢。
案列
html
<div id="test1"></div>
<br>
<input type="button" οnclick="innerTest()" value="testInnerHTML">
<div id="test2"></div>
<br>
<input type="button" οnclick="appendTest()" value="testAppendChild">
JavaScript
function innerTest() {
let t1 = (new Date()).getTime(),
t2 = undefined,
a = "<b>apple</b>",
b = document.getElementById("test1");
for (var i = 0; i < 500; i++) b.innerHTML += a;
t2 = (new Date()).getTime();
console.log("testInnerHTML: " + (t2 - t1));
}
function appendTest() {
let t1 = (new Date()).getTime(),
t2 = undefined,
b = document.getElementById("test2");
for (var i = 0; i < 500; i++) {
let a = document.createElement("b");
a.appendChild(document.createTextNode("apple"));
b.appendChild(a);
}
t2 = (new Date()).getTime();
console.log("testAppendChild: " + (t2 - t1));
}
createTextNode
MDN
创建一个新的文本节点。这个方法可以用来转义
HTML字符。
w3school
createTextNode()方法创建文本节点。
createElement
MDN
在HTML文档中，
Document.createElement方法用于创建一个由标签名称tagName指定的HTML元素。如果用户代理无法识别tagName，则会生成一个未知HTML元素HTMLUnknownElement。
w3school
createElement方法创建元素节点。
getTime
w3school
getTime()方法返回从1970年1月1日午夜到指定日期之间的毫秒数。
MDN
getTime()方法返回一个时间的格林威治时间数值。
你可以使用这个方法把一个日期时间赋值给另一个Date对象。这个方法的功能和valueOf()方法一样。