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

发布网友发布时间：2022-04-29 00:27

共6个回答

热心网友时间：2022-05-15 21:29

　　从定义来理解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); // 这两种方法均可实现
　　}

热心网友时间：2022-05-15 22:47

通常,这个方法是与
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的~

热心网友时间：2022-05-16 00:21

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

热心网友时间：2022-05-16 02:13

因为你的exaBubbleRight节点在第一次添加后已经成为list的子节点了。就形如下面这段代码：
<html>
<head>
<title></title>
<script language="javascript">
function $(str)
{
return document.getElementById(str);
}
function test()
{
var div =$("div");
var p = $("p");
p.innerHTML = "456";
div.appendChild(p);
}
</script>
</head>
<body>
<div id='div'>
<p id='p'>123</p>
</div>
<button value="test" onclick="test()"/>
</body>
</html>
你可以新创建一个元素，或者使用 var innerBubble=document.getElementById("exaBubbleRight").cloneNode()
<html>
<head>
<title></title>
<script language="javascript">
function $(str)
{
return document.getElementById(str);
}
function test()
{
var div =$("div");
var p = $("p").cloneNode();
p.innerHTML = "456";
div.appendChild(p);
}
</script>
</head>
<body>
<div id='div'>
<p id='p'>123</p>
</div>
<button value="test" onclick="test()"/>
</body>
</html>

热心网友时间：2022-05-16 04:21

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

热心网友时间：2022-05-16 06:45

appendChild(innerBubble)

若innerBubble已经存在，则移动之