javascript 第二次调用方法时appendChild第二次不是添加节点，而是替换节点

　　从定义来理解appendChild() 方法：
　　appendChild() 方法：可向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newchild)
　　appendChild方法是在父级节点中的子节点的末尾添加新的节点（相对于父级节点 来说）。
　　来看个这个简单的实例：在id为box-con 的末尾添加一个子节点div
　　window.onload = function () {
　　var btn = document.getElementById("creatbtn");
　　btn.onclick = function() {
　　insertEle();
　　}
　　}
　　function insertEle() {
　　var oTest = document.getElementById("box-one");
　　var newNode = document.createElement("div");
　　newNode.innerHTML = " This is a newcon ";
　　//oTest.appendChild(newNode);
　　oTeset.insertBefore(newNode,null); // 这两种方法均可实现
　　}

通常,这个方法是与
document.body,createElement(nodeName)
document.body.createTextNode(txt)
配合使用的,作用是将指定的DOM类型的节点加到document.body的末尾.
例如:
//创建textNode
var txt=document.body.createTextNode("宋文强是天才");
//创建objectNode
var p=document.body.createElement("p");
//加文本以子节点形式加入到P元素中
p.appendChild(txt);
//将上面创建的P元素加入到BODY的尾部
document.body.appendChild(p);

上面的代码将在页面最底部动态的生成指定的文本和元素
P.s:注意你的方法写的有错误
是appendChild而非appendchild.大小写很重要的，JAVASCRIPT是caseSensitive的~

同一个页面是不能同时出现id相同的两个元素的，你每次添加的元素id都是exaBubbleRight，所以第二次添加应该就不起作用了

因为你的exaBubbleRight节点在第一次添加后已经成为list的子节点了。就形如下面这段代码：

里面已经存在一个了，会替换掉的，你可以增加判断，如果有进行追加兄弟节点