Question

我想在javascript.i附加带有箭头的div元素附加代码。我坚持使用它。图片显示了不同的div。我已经尝试了很多东西但没有工作。调试时我已经完成了一些内联css，所以请不要打扰。

$(function() {
      document.getElementById('file').onchange = function() {
        debugger;
        var file = this.files[0];
        var reader = new FileReader();
        reader.onload = function(progressEvent) {
          // Entire file
          console.log(this.result);
          // By lines
          var lines = this.result.split('\n');
          var list = [];
          for (var line = 0; line < lines.length; line++) {
            list.push(lines[line]);
          }

          for (var i = 0; i < lines.length - 1; i++) {
            $('#ggjj').append('<div id="p' + i + '" style="border:solid black;font-size:12px;margin:10 105 0 0;width:150px;hieght:100px;word-wrap: break-word;float:left;overflow:hidden;">' + list[i] + '</div>');
          }
          var p = $("#p0");
          var q = $("#p1");
          var position = p.position();
          x = position.left;
          y = position.top;
          var positio = q.position();
          xx = positio.left;
          yy = positio.top;
          console.log("" + x + " " + y + " " + xx + " " + yy);
          $("svg").append('<defs><marker id="arrow" markerWidth="10" 
            markerHeight = "10"
            refX = "0"
            refY = "3"
            orient = "auto"
            markerUnits = "strokeWidth" > < path d = "M0,0 L0,6 L9,3 z"
            fill = "#f00" / > < /marker> < /
            defs > < line x1 = "'+x+'"
            y1 = "'+y+'"
            x2 = "'+xx+'"
            y2 = "'+yy+'"
            stroke = "#000"
            stroke - width = "5"
            marker - end = "url(#arrow)" / > ');
            $("#ggjj").html($("#ggjj").html());
          };
          reader.readAsText(file);
        };
      });

<html>

<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>
  <div>
    <input type="file" name="file" id="file" />
  </div>
  <div id="ggjj">
    <svg width="1000px" height="100px">
    </div>
    </svg>
</body>

</html>

如何通过箭头连接两个div元素？

0 个答案: