Question 60914 in Html Question posted in
Some basic documentation can be found here.

Is there a way of inserting an element between two already existing elements? – Html

In short, I am trying to build a mind-map website, and the circles on screen presently connect from one to the next one created, however, a mind-map should really have the ability to have multiple lines from a circle joining to multiple circles from a single circle.
Really not sure how to go about this, since I believe it would involve inserting lines between lines, but I am numbering them "line1", "line2", etc.
Any suggestions would be very appreciated!

if (circleCount > 0) {
    let line = document.createElement("div");
    line.className = "line";
    line.id = "line" + circleCount;
    document.getElementById("circleContainer").appendChild(line);
}


createLines(); 

function createLines() {
    //get all the circle and line elements
    let lines = document.getElementsByClassName("line"); 
    //for loop iterating through each circle, and updating the line that connects it to the previous circle 
    for (let i = 1; i < circles.length; i++) {
        let circle = circles[i]; 
        let line = lines[i - 1]; 
        //store the x and y positions of the relevant circles 
        let x1 = parseInt(circle.style.left); 
        let y1 = parseInt(circle.style.top); 
        let x2 = parseInt(circles[i - 1].style.left); 
        let y2 = parseInt(circles[i - 1].style.top); 
        //calcualate the distance between the circles 
        let distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); 
        //set the position of the line 
        line.style.left = x1 + "px"; 
        line.style.top = y1 + "px"; 
        //set the rotation of the line 
        line.style.width = distance + "px"; 
        line.style.transform = "rotate(" + Math.atan2(y2 - y1, x2 - x1) + "rad)"; 

    }
}

I tried to number the circles in multiples of 10, thereby allowing me to just have the last clicked circle + 1, since I thought this would insert it in between two pre-existing elements, using the first circle (circle10) in order to test. I also tried using insertBefore() method, based on another post, however, when the createLines() function was called, the lines reset back to sequentially joining to one another.

if (circleCount == 10) {
    circle.id = lastClickedCircle.id + 1; 
} else {
    circle.id = circleCount;
}

This didn’t seem to work at all.

Tags:

2

Answers


  1. 0

    Clearly yes. If you want to insert c between a and b, the code will be:

    a.parentNode.insertBefore(c,b)

    c: the element to be inserted

    b: the element for inserting before

    Login or Signup to reply.
  2. 0 
    // get the container element
let container = document.getElementById("container");

// create a new element to insert
let newElement = document.createElement("div");
newElement.className = "new-element";

// get the existing elements to insert before
let existingElement1 = document.getElementById("existing-element-1");
let existingElement2 = document.getElementById("existing-element-2");

// insert the new element before the second existing element
container.insertBefore(newElement, existingElement2);

    the insertBefore() method is called on the container element, with two arguments: the new element to insert (newElement) and the existing element to insert before (existingElement2). This will insert newElement as a child of container, immediately before existingElement2.

    Note that in order to use insertBefore(), you need to have a reference to both the new element you want to insert and the existing element you want to insert before. You can use methods like getElementById() or getElementsByClassName() to find existing elements in the DOM.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search