Javascript 在子标记之间添加树节点 1. 谷歌 2. Gmail 3. 谷歌文件 4. YouTube 5. 谷歌地图

如何在特定树节点的标记之间添加新节点（带有id、标签、url标记）？ 添加后，我想显示，这里有一个显示功能。。。我试过一些黑客，但还没有

<node>
    <id>1</id>
    <label>Google</label>
    <url></url>
    <children>
        <node>
            <id>2</id>
            <label>Gmail</label>
            <url></url>
            <children>
                <node>
                    <id>3</id>
                    <label>Google Docs</label>
                    <url></url>
                    <children></children>
                </node>
            </children>
        </node>
        <node>
            <id>4</id>
            <label>YouTube</label>
            <url></url>
            <children></children>
        </node>
        <node>
            <id>5</id>
            <label>Google Maps</label>
            <url></url>
            <children></children>
        </node>
    </children>
</node>

//我已替换为函数displayTree（width，height）{；我不想在添加新节点后获取xmlFile
函数显示树（xmlFile、宽度、高度）{
//局部变量
var zoomLevel=1.0；
如果（宽度！=未定义）
设置画布宽度（宽度）；
如果（高度！=未定义）
设置画布高度（高度）；
//我不想使用服务器上的xml字符串
//parseXML（xmlFile）；
if（xmlDoc==null）
返回；
root=xmlDoc.documentElement；
//构建对象树
createObjects（根，0）；
//将根节点设置为可见
root.visible=true；
root.x=getCanvasWidth（）/4；
root.y=getCanvasHeight（）/2；
canvas=document.getElementById（“canvas”）；
p=处理（画布）；
//处理初始化函数
p、 设置=函数（）{
p、 大小（getCanvasWidth（），getCanvasHeight（））；
p、 彩色模式（p.RGB，256）；
p、 背景（getCanvasColor（））；
p、 冲程（0,0,0）；
p、 矩形模式（p.CENTER）；
p、 光滑的（）；
//p、 文本大小（14）；
var myFont=p.loadFont（getNodeFontType（），10）；
p、 textFont（myFont）；
p、 textAlign（p.CENTER）；
};
//主牵引回路
p、 draw=函数（）{
p、 背景（getCanvasColor（））；
显示（根）；
设置光标（0）；
如果（isDanceEnabled（））
舞蹈（0）；
if（isExpanded（））{
setIsExpanded（假）；
expandAll（）；
}   
}
//递归调用以显示适当的节点并用线链接它们
//还处理鼠标悬停颜色更改和拖动颜色更改
功能显示（节点）{
if（node.visible）{
if（hasBorder（）==true）
p、 笔划（getBorderColor（））；
其他的
p、 仰泳（）；
if（被拖动！=null&&node==被拖动）{
p、 填充（getActiveColor（））；
}else if（p.mouseX>=node.x-node.width/2&&p.mouseX=node.y-node.height/2&&p.mouseY 0）{
显示（node.children[i]）；
p、 笔划（getLineColor（））；
p、 线（x_原点，y_原点，node.children[i].x-node.children[i].width/2，node.children[i].y）；
}
}
}
}
//鼠标向下回调
p、 mousePressed=function（）{
if（p.mouseButton==p.LEFT）{
clickedNode=null；
//确定单击哪个节点
对于（var i=0；i=allNodes[i].x-allNodes[i].width/2&&p.mouseX=allNodes[i].y-allNodes[i].height/2&&p.mouseY听起来像是在寻找方法

要创建新节点，可以使用

下次试着只发布相关的代码片段而不是整个项目-我认为这里的任何人都不想阅读那么多文本。您发布的代码太多了。这不是有用的，也不是说明您的问题，而是噪音。添加节点后，我如何显示它？displayTree函数显示xml文件或xml字符串到画布元素。displayTree函数不能直接接收xml而不是接收字符串吗？不，xml结构通过XMLHttpRequest来自服务器。您可以使用
XMLHttpRequest.responseXML
来获取xml而不是字符串。已测试并带来：错误：未捕获异常：[异常。。。“无法转换JavaScript参数arg 1[nsidElement.insertBefore]”nsresult:“0x8057009（NS_错误\u XPC_错误\u转换_JS）”位置：“JS frame:：myjsfile.JS:：addNode:：”数据：否]
//I've replaced with function displayTree(width, height) { ; I don't want to get xmlFile after the new node has been added
function displayTree(xmlFile, width, height){
//Local variables
var zoomLevel = 1.0;

if (width != undefined)
    setCanvasWidth(width);
if (height != undefined)
    setCanvasHeight(height);
//I don't want to prase the xml string from the server
    //parseXML(xmlFile);
if(xmlDoc == null)
    return;
root = xmlDoc.documentElement;

//Build the object tree
createObjects(root, 0);

//Set root node visible
root.visible = true;
root.x = getCanvasWidth()/4;
root.y = getCanvasHeight()/2;

canvas = document.getElementById("canvas");
p = Processing(canvas);

//Processing init function
p.setup = function(){
    p.size(getCanvasWidth(), getCanvasHeight());
    p.colorMode(p.RGB, 256);
    p.background(getCanvasColor());
    p.stroke(0, 0, 0);
    p.rectMode(p.CENTER);
    p.smooth();
    //p.textSize(14);

    var myFont = p.loadFont(getNodeFontType(), 10);
    p.textFont(myFont);
    p.textAlign(p.CENTER);      
};

//Main draw loop
p.draw = function(){
    p.background(getCanvasColor());
    display(root);
    setCursor(0);
    if (isDanceEnabled())
        dance(0);
    if (isExpanded()) {
        setIsExpanded(false);
        expandAll();
    }   
}


//Recursively called to display appropriate nodes and link them with lines
//Also handles mouseover color change and dragging color change
function display(node){
    if(node.visible){
        if (hasBorder() == true)
            p.stroke(getBorderColor());
        else
            p.noStroke();

        if(beingDragged != null && node == beingDragged){
            p.fill(getActiveColor());
        } else if(p.mouseX >= node.x-node.width/2 && p.mouseX <= node.x+node.width/2 
            && p.mouseY >= node.y-node.height/2 && p.mouseY <= node.y+node.height/2){
            if (currentClickedNode == node)
                p.fill(getSelectedColor());
            else
                p.fill(getHoverColor());

            document.getElementById('show_label').innerHTML = node.label;
            document.getElementById('show_url').innerHTML = node.url;
            document.getElementById('show_url').href = node.url;
        } else if (currentClickedNode == node){
            p.fill(getSelectedColor());                     
        } else {
            p.fill(getNodeColor());
        }           
        p.rect(node.x, node.y, node.width, node.height);

        //Handle node expander graphic
        if (node.children.length != 0) {
            p.noStroke();
            p.fill(getActiveColor());
            p.rect(node.x+node.width/2, node.y, 3, 3);
        }   

        //Handle text           
        p.fill(getFontColor());
        // calculate text size based on the current size of the node
        p.textSize(getTextSize(node));
        p.text(node.label, node.x - node.width/2 + 5, node.y + 5);
        //p.text(node.label, node.x-35, node.y+5);

        //Used for drag/drop
        var x_origin = node.x + node.width/2;
        var y_origin = node.y;

        //Recurse on children and draw connecting lines
        for(var i=0; i<node.children.length; i++){
            if(node.children[i].visible && node.children[i].x - node.children[i].width/2 > 0 && node.children[i].y > 0){
                display(node.children[i]);
                p.stroke(getLineColor());
                p.line(x_origin, y_origin, node.children[i].x - node.children[i].width/2, node.children[i].y);
            }
        }
    }
}

//Mousedown callback
p.mousePressed = function() {
    if(p.mouseButton == p.LEFT){
        clickedNode = null;

        //Determine which node is clicked on
        for(var i=0; i<allNodes.length; i++){
            if(p.mouseX >= allNodes[i].x-allNodes[i].width/2 && p.mouseX <= allNodes[i].x+allNodes[i].width/2 
                && p.mouseY >= allNodes[i].y-allNodes[i].height/2 && p.mouseY <= allNodes[i].y+allNodes[i].height/2){
                clickedNode = allNodes[i];
                break;
            }
        }

        //Set state vars for drag and drop of a node
        if(clickedNode != null){
            clickedNode.moved = true;
            beingDragged = clickedNode;
            currentClickedNode = clickedNode;
            difx = p.mouseX - clickedNode.x;
            dify = p.mouseY - clickedNode.y;

        } else {
        //Set state vars for drag and drop of the whole tree (clicked on empty space)
            for(var i=0; i<allNodes.length; i++){
                allNodes[i].oldx = allNodes[i].x;
                allNodes[i].oldy = allNodes[i].y;
            }
            difx = p.mouseX;
            dify = p.mouseY;

            setCursor(4);
        }

        return;
    } else if(p.mouseButton == p.RIGHT){
        //Handle right-clicking for links

        clickedNode = null;

        //Determine which node is clicked on
        for(var i=0; i<allNodes.length; i++){
            if(p.mouseX >= allNodes[i].x-allNodes[i].width/2 && p.mouseX <= allNodes[i].x+allNodes[i].width/2 
                && p.mouseY >= allNodes[i].y-allNodes[i].height/2 && p.mouseY <= allNodes[i].y+allNodes[i].height/2){
                clickedNode = allNodes[i];
                break;
            }
        }

        //Set state vars for drag and drop of a node
        if(clickedNode != null){
            clickedNode.moved = true;
            beingDragged = clickedNode;
            difx = p.mouseX - clickedNode.x;
            dify = p.mouseY - clickedNode.y;
        } else {
        //Set state vars for drag and drop of the whole tree (clicked on empty space)
            for(var i=0; i<allNodes.length; i++){
                allNodes[i].oldx = allNodes[i].x;
                allNodes[i].oldy = allNodes[i].y;
                allNodes[i].oldwidth = allNodes[i].width;
                allNodes[i].oldheight = allNodes[i].height;
            }
            difx = p.mouseX;
            dify = p.mouseY;
            setCursor(6);
        }
        return;     
    }

}

// Handle dragging
p.mouseDragged = function(){
    if(p.mouseButton == p.LEFT){
        mouseMoved = true;
        if(clickedNode != null){    //dragging on the node - move the node
            clickedNode.x = p.mouseX-difx; 
            clickedNode.y = p.mouseY-dify;
        } else {                    //dragging on the empty space - panning
            for(var i=0; i<allNodes.length; i++){
                allNodes[i].x = allNodes[i].oldx + p.mouseX - difx;
                allNodes[i].y = allNodes[i].oldy + p.mouseY - dify;
            }
        }
    } else if(p.mouseButton == p.RIGHT){
        mouseMoved = true;
        if(clickedNode != null){
            clickedNode.x = p.mouseX-difx; 
            clickedNode.y = p.mouseY-dify;
        } else {    // Zoom             
            // zooming only refers to the difference in y-axis              
            zoomLevel = 1.0 + (p.mouseY - dify) / 500.0;
            zoom(zoomLevel);
        }
    }
}


p.mouseReleased = function(){
    // If mouse has not moved since mousedown, expand/collapse tree
    if(!mouseMoved){
        if (p.mouseButton == p.LEFT){
            clickedNode = null;
            // Determine which node is clicked on
            for(var i=0; i<allNodes.length; i++){
                if(p.mouseX >= allNodes[i].x-allNodes[i].width/2 && p.mouseX <= allNodes[i].x+allNodes[i].width/2 
                    && p.mouseY >= allNodes[i].y-allNodes[i].height/2 && p.mouseY <= allNodes[i].y+allNodes[i].height/2){
                    clickedNode = allNodes[i];
                    break;
                }
            }           
            if(clickedNode == null){
                enableDance();
                return;
            }

            //Expand or collapse
            if(clickedNode.expanded){
                clickedNode.expanded = false;
                collapseNode(clickedNode);
            } else {
                clickedNode.expanded = true;
                expandNode(clickedNode);
            }

            calculateChildrenPosition(clickedNode);

            document.getElementById('edit_label').value = clickedNode.label;
            document.getElementById('edit_url').value = clickedNode.url;                
            document.getElementById('edit_label').removeAttribute("disabled");
            document.getElementById('edit_url').removeAttribute("disabled");
        } else if (p.mouseButton == p.RIGHT){   
            if (clickedNode != null){
                document.getElementById('edit_label').value = clickedNode.label;
                document.getElementById('edit_url').value = clickedNode.url;                    
                document.getElementById('edit_label').removeAttribute("disabled");
                document.getElementById('edit_url').removeAttribute("disabled");
                //saveImage("file://localhost/E:/Documents%20and%20Settings/My%20Documents/Aptana%20Studio/InteractiveTreeview/test.png");
                //p.link(clickedNode.url, "_new");  
                openNewWindow(clickedNode.url);                                                     
            } else {    // right click on the empty space
                zoomToFit();
            }
        }   
    } else if (mouseMoved){
        if (p.mouseButton == p.LEFT) {
            clickedNode = null;
            //Determine which node is clicked on
            for (var i = 0; i < allNodes.length; i++) {
                if (p.mouseX >= allNodes[i].x - allNodes[i].width / 2 && p.mouseX <= allNodes[i].x + allNodes[i].width / 2 &&
                p.mouseY >= allNodes[i].y - allNodes[i].height / 2 &&
                p.mouseY <= allNodes[i].y + allNodes[i].height / 2) {
                    clickedNode = allNodes[i];
                    break;
                }
            }
            if (clickedNode == null) {
                // dragging is finished, so back to default cursor
                setCursor(5);
                return;
            }
        } else if (p.mouseButton == p.RIGHT){
            clickedNode = null;
            //Determine which node is clicked on
            for (var i = 0; i < allNodes.length; i++) {
                if (p.mouseX >= allNodes[i].x - allNodes[i].width / 2 && p.mouseX <= allNodes[i].x + allNodes[i].width / 2 &&
                p.mouseY >= allNodes[i].y - allNodes[i].height / 2 &&
                p.mouseY <= allNodes[i].y + allNodes[i].height / 2) {
                    clickedNode = allNodes[i];
                    break;
                }
            }
            if (clickedNode == null) {
                // dragging is finished, so back to default cursor
                setCursor(5);
                return;
            }
        }   

    }

    mouseMoved = false;
    beingDragged = null;
    clickedNode = null;
}

p.init();

}

new_node = document.createElement('theTagNameYouWant');
new_node.id = 'the id';
new_node.url='...'
...

right_sibling = /* the node that will be the next sibling of the new node */
right_sibling.parent.insertBefore(new_node, right_sibling)

function addNode() {

var newNode = document.createElement("node");
var newId = document.createElement("id");
var newLabel = document.createElement("label");
var newUrl = document.createElement("url"); 

newNode.Id = newId;
newNode.Label = newLabel;
newNode.Url = newUrl;

elementDoc = xmlDoc.documentElement;
var sourceNode = currentClickedNode.tagName="children";
elementDoc.insertBefore(newNode, sourceNode);
}