用 insertBefore 增加节点，怎么会多出很多 <div></div>?

Question

  用 insertBefore 增加节点，怎么会多出很多 <div></div>?

Answer 1

  添加后的效果<DIV onclick="gg()">
    <IMG src="Images/m.gif" name=p298>
    <SPAN onselectstart=event.returnvalue=false; onmouseover="this.style.color='#003399';this.style.cursor='default';this.style.cursor='hand';this.style.textDecoration='underline'" style="LEFT: 2px; CURSOR: hand; COLOR: #000000; POSITION: relative; TEXT-DECORATION: none" onmouseout="this.style.color='#000000';this.style.textDecoration='none'">
    sss
    </SPAN>
    </DIV>
    </DIV>
    <DIV>
    <DIV id=d298 style="DISPLAY: block; LEFT: 15px; POSITION: relative"><DIV>
        <DIV><DIV onclick="gg()">
            <IMG src="Images/m.gif" name=p300>
                <SPAN onselectstart=event.returnvalue=false; onmouseover="this.style.color='#003399';this.style.cursor='default';this.style.cursor='hand';this.style.textDecoration='underline'" style="LEFT: 2px; CURSOR: hand; COLOR: #000000; POSITION: relative; TEXT-DECORATION: none" onmouseout="this.style.color='#000000';this.style.textDecoration='none'">
                        ssss
                </SPAN>
         </DIV>
         </DIV>
         <DIV>
       <DIV id=d300 style="DISPLAY: block; LEFT: 15px; POSITION: relative">
        <DIV onselectstart=event.returnvalue=false; id=d301 onmouseover="this.style.color='#003399';this.style.cursor='default';this.style.cursor='hand';this.style.textDecoration='underline'" style="CURSOR: hand; COLOR: #000000; TEXT-DECORATION: none" onclick=rc() onmouseout="this.style.color='#000000';this.style.textDecoration='none'">
            sss
         </DIV>
         </DIV>
         </DIV>
         </DIV>
         <DIV onselectstart=event.returnvalue=false; id=d299 onmouseover="this.style.color='#003399';this.style.cursor='default';this.style.cursor='hand';this.style.textDecoration='underline'" style="CURSOR: hand; COLOR: #000000; TEXT-DECORATION: none" onclick=rc() onmouseout="this.style.color='#000000';this.style.textDecoration='none'">
            ss
         </DIV>
         </DIV>
         </DIV>
         </DIV>
         </DIV>
         
         

Answer 2

 
 这个是代码
    function branchNewNode(x,y,level,scale,childId,childTitle,anchorId) 
    {
      
       if (typeof(anchorId) != "undefined")
       {
            var x = x;
            var y = y;
            var level = level;
            var scale = scale;
            var childId = childId;
            var childTitle = childTitle;
            var anchorId = anchorId;
                       var childNode = document.createElement("div");
         
            var anchor = document.getElementById(anchorId)            if (anchor.getElementsByTagName("div").length > 0  )      //在根节点添加节点
            {  
                anchor.insertBefore(childNode,removeTextNode(anchor.childNodes[0]));   //   getElementsByTagName("div")
            
                var dd = "<div id=\"" + childId + "\"onselectstart=\"event.returnvalue=false;\"onmouseover=\"this.style.color='#003399';this.style.cursor='default';this.style.cursor='hand';this.style.textDecoration='underline'\"onmouseout=\"this.style.color='#000000';this.style.textDecoration='none'\"onclick=\"rc(" + x + "," + y + "," + level + "," + scale + "," + childId + ")\">" + childTitle + "</div>"
         
                childNode.innerHTML = dd;
                
                if (anchor.style.display == "none") 
                {
                    anchor.style.display = "block";
                    document.getElementById(anchorId.replace("d","p")).src = "Images/m.gif"; 
                }
            } 
            
            else                                                       //叶节点添加节点
            { 
                var anchorUp = anchor.parentNode.childNodes  //getElementsByTagName("div")                var z = anchorUp.length    // 
        
                for(var i = 0; i < z; i++)
                {  
                    if (anchorUp[i].id == anchorId)
                    {
                        break;
                    }
                } 
                
                var imageId = anchorId.replace("d","p");
                anchorTitle = anchor.innerText;
                
                var functionHead = anchor.onclick.toString();
                
                functionHead = "gg" + functionHead.substring(25,functionHead.length - 3) + "," + imageId + ",'')";
 
                var aa =  "<div  onclick=\"" + functionHead + "\">" +
                              "<img name=\"" + imageId + "\"src=\"Images/m.gif\">" +
                               "<span onselectstart=\"event.returnvalue=false;\"onmouseover=\"this.style.color='#003399';this.style.cursor='default';this.style.cursor='hand';this.style.textDecoration='underline'\"onmouseout=\"this.style.color='#000000';this.style.textDecoration='none'\"style=\"left:2;position:relative\">" +
                                 anchorTitle +
                               "</span>" +
                            "</div>"; 
                            
                                
                var bb = "<div id=\"" + anchorId + "\"style=\"display:block;left:15px;position:relative\">" +
                             "<div id=\"" + childId + "\" onselectstart=\"event.returnvalue=false;\"onmouseover=\"this.style.color='#003399';this.style.cursor='default';this.style.cursor='hand';this.style.textDecoration='underline'\"onmouseout=\"this.style.color='#000000';this.style.textDecoration='none'\" onclick=\"rc(" + x + "," + y + "," + level + "," + scale + "," + childId + ")\">" + childTitle + "</div>" +
                         "</div>";
               
                var childNode2 = document.createElement("div");
                childNode2.innerHTML = bb;
                anchor.parentNode.insertBefore(childNode2,removeTextNode(anchorUp[i]));                childNode.innerHTML = aa;
                
                anchor.parentNode.insertBefore(childNode,removeTextNode(anchorUp[i]));
 
                anchor.parentNode.removeChild(anchor.parentNode.childNodes[i + 2])              }
        }
    } 

Answer 3

  anchor.parentNode.insertBefore(childNode,removeTextNode(anchorUp[i]));   anchor.parentNode.removeChild(anchor.parentNode.childNodes[i + 2])  注意remove掉原先创建的DIV。 insertBefore只是拷贝

Answer 4

  xuyiazl 
     能说的详细些吗？

Answer 5

两个createElement，一个removeChild，越加越多