从定义来理解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的子节点了。就形如下面这段代码:
123
123
里面已经存在一个了,会替换掉的,你可以增加判断,如果有进行追加兄弟节点