javascript - How to draw a line from one element to another element -

this question has answer here:

• how can connect 2 html elements drawing lines in background canvas? 1 answer

i'm creating tree structure. have created numbers in circle using html badges. want draw lines 1 element element. have tried using image left diagonal , right diagonal. not working.

this html creating badges:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<span id="0" class="cl w3-badge">0</span><br><br><br><br> <span id="1" class="cl w3-badge">0</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span id="2" class="cl w3-badge">0</span>  

this javascript:

var data = []; data.push(5); data.push(6); data.push(4); $('.w3-badge').each(function(i, obj) {  document.getelementbyid(i).innerhtml = data[i]; }); 

this image of left line

can me??

i'm trying final tree this: final tree

using svg best option kind of thing, wrote function below need. have tho rewrite needs.
use full page see result right.

function drawline(div1, div2){  var svg = document.createelementns("http://www.w3.org/2000/svg", "svg");   svgpath = document.createelementns("http://www.w3.org/2000/svg", "path");  var div1offset = div1[0].getboundingclientrect();  var div2offset = div2[0].getboundingclientrect();              var pathnr = "";              pathnr = "m"+ (div1offset.width + div1offset.left)+ " " +  ((div1offset.top + div1offset.height) / 2)              pathnr += "h" +( div2offset.left)              pathnr += "v" +(div2offset.top)              pathnr += "h" +( -div2offset.left )              svgpath.setattribute("d", pathnr);              svgpath.setattribute("stroke", "red");              svgpath.setattribute("stroke-width", "1");              svgpath.setattribute("fill", "white");              svgpath.setattribute("id", "test");              svg.appendchild(svgpath);              $("body").append(svg);    }    $(document).ready(function(){    drawline($(".box_1"), $(".box_2"))    });

.box{  width:150px;  height:150px;  margin:30px;  background:black;    }    svg{  position:absolute;  left:0; top:0;  width:100%;  height:100%;    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class='box box_1'></div>      <div class='box box_2'></div>