如何在已有元素间插入元素？思维导图多节点连线实现问询

你的核心问题在于当前的连线逻辑是基于节点创建顺序的线性关联，完全忽略了思维导图的多分支父子关系。要实现单个节点连接多个子节点，必须从数据结构入手，用明确的关联关系替代依赖DOM顺序的逻辑。

1. 重构核心数据结构 #

放弃用节点/连线的ID顺序关联，改用数组存储每条连线的具体连接关系：

// 全局数组，存储所有连线的关联信息
const connections = [];
// 记录用户最后选中的父节点（用于创建子节点时关联）
let lastSelectedNode = null;
// 节点计数，用于生成唯一ID
let circleCount = 0;

2. 修改节点与连线的创建逻辑 #

让用户通过点击选择父节点，再创建子节点，此时才生成对应连线并记录关联：

// 给所有节点绑定点击事件，记录选中的父节点
document.addEventListener('click', (e) => {
    if (e.target.classList.contains('circle')) {
        lastSelectedNode = e.target;
    }
});

// 创建新节点的逻辑
function createCircle(x, y) {
    const circle = document.createElement('div');
    circle.className = 'circle';
    circle.id = `circle${circleCount}`;
    circleCount++;
    circle.style.left = `${x}px`;
    circle.style.top = `${y}px`;
    document.getElementById('circleContainer').appendChild(circle);

    // 如果有选中的父节点，创建连线并记录关联
    if (lastSelectedNode) {
        const line = document.createElement('div');
        line.className = 'line';
        line.id = `line${connections.length}`;
        document.getElementById('circleContainer').appendChild(line);
        
        // 存入连线关联信息
        connections.push({
            from: lastSelectedNode.id,
            to: circle.id,
            element: line
        });
    }

    // 更新所有连线
    createLines();
}

3. 重写连线渲染函数 #

基于connections数组里的关联关系渲染连线，不再依赖节点顺序：

function createLines() {
    // 把所有节点按ID存入对象，方便快速查找
    const circleMap = {};
    document.querySelectorAll('.circle').forEach(circle => {
        circleMap[circle.id] = circle;
    });

    // 遍历每条连线，计算位置与样式
    connections.forEach(conn => {
        const fromCircle = circleMap[conn.from];
        const toCircle = circleMap[conn.to];
        if (!fromCircle || !toCircle) return;

        const line = conn.element;
        // 取节点中心坐标（比取左上角更准确）
        const centerX1 = parseInt(fromCircle.style.left) + fromCircle.offsetWidth / 2;
        const centerY1 = parseInt(fromCircle.style.top) + fromCircle.offsetHeight / 2;
        const centerX2 = parseInt(toCircle.style.left) + toCircle.offsetWidth / 2;
        const centerY2 = parseInt(toCircle.style.top) + toCircle.offsetHeight / 2;

        // 计算连线长度与旋转角度
        const distance = Math.sqrt(Math.pow(centerX2 - centerX1, 2) + Math.pow(centerY2 - centerY1, 2));
        const angle = Math.atan2(centerY2 - centerY1, centerX2 - centerX1);

        // 设置连线样式
        line.style.position = 'absolute';
        line.style.left = `${centerX1}px`;
        line.style.top = `${centerY1}px`;
        line.style.width = `${distance}px`;
        line.style.height = '2px';
        line.style.background = '#333';
        line.style.transform = `rotate(${angle}rad)`;
        line.style.transformOrigin = '0 50%'; // 让旋转从父节点中心开始
    });
}

4. 为什么之前的方法无效？ #

你之前修改节点ID或用insertBefore的思路，本质还是在试图用DOM元素的顺序/ID来模拟关联，但createLines函数始终是按节点数组的顺序，把第i个节点和第i-1个节点绑定，完全无视你想要的父子关系，所以每次调用createLines都会回到线性连接状态。

补充说明 #

• 当节点被拖拽或位置改变时，只需调用createLines()就能重新渲染所有连线
• 如果需要支持删除节点/连线，只需从connections数组中移除对应项，再删除DOM元素即可

内容的提问来源于stack exchange，提问作者CClamping