prepend:  在选择节点内部的第一个子元素前插入由JSX表达式定义的新元素

append:  在选择节点内部的最后一个子元素追加由JSX表达式定义的元素

原始DOM结构

 <div id="a">
    <div id="b"></div>
 </div>

JS执行prepend

document.$("div#a").prepend(<div#c />);

原始DOM结构变成：

  <div id="a">
      <div id="c"></div>
       <div id="b"></div>        
</div>

JS执行append

document.$("div#a").append(<div#c />);

原始DOM结构变成：

  <div id="a">
         <div id="b"></div>
        <div id="c"></div>
</div>

==========================================美丽的分隔=======================================

patch：把节点outerHTML替换成新的html

content：把节点innerHTML替换成新的html

原始DOM结构

<div id="a">
    <div id="b"></div>
 </div>

JS执行patch

document.$("div#a").patch(<div#c />);

原始DOM结构变成：

<div id="c"></div>

Note:

把div#a包括自己一起替换成<div#c/></div>,这样子再通过div#a查找元素，会报错，因为替换成了div#c,已经没有div#a这个元素存在了,替换后的结果

<div#c></div>

JS执行content

document.$("div#a").content(<div#c />);

原始DOM结构变成：

<div id="a">
    <div id="c"></div>
</div>

Note:

把div#a内部的所有元素替换，div#a还存在，替换后的结果

<div#a>
        <div#c></div>
</div>

==========================================美丽的分隔=======================================

element.componentUpdate( obj )
Note: componentUpdate函数实际上执行以下操作
Object.assign(element,obj);      // 1.合并属性
element.post( (element) => {     // 2.入队更新
var vnode = element.render();  // 3.调用必须返回 vnode（JSX 表达式）的 .render(）
      element.patch(vnode);          // 4.对元素进行完全替换
});