如何在jquery对话框扩展框中动态创建div

Question

每当将csv数据拖动到选项卡时，我希望在Jquery对话框扩展框内动态创建div。例如：如果将csv数据拖动到图形选项卡，则应将其显示为jquery对话框扩展框内的图形，其中div是动态创建的。下面是在jquery对话框扩展框中即时创建的div。

//If data is dragged to graph tab,

$("#graph").droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      accept: ":not(.ui-sortable-helper)",
      drop: function(event, ui) {
        HoldOn.open();
        data1 = ui.draggable.text();
        $('#csv').dropdown('toggle');
        data2 = data1;
        json_link = 'https://yyyy.cartodb.com/api/v2/sql?q=SELECT * FROM ' + data2;
        msa_usa_json_link = 'https://yyyy.cartodb.com/api/v2/sql?q=select * from msa_usa';
        $.getJSON(json_link,
          function(data) {
            ......On the fly creation of div inside the dialog extend
          })
      })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="graph_container" class="">
  <div class="row" style="height: 100%">
    <div id="graph_area" class="col-sm-3 pull-right">
      Showing :
    </div>
    <div class="col-md-2">
      <div class="mini-submenu">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </div>
      <div class="list-group">
        <span class="list-group-item active-result">
          Submenu
          <span class="pull-right" id="slide-submenu">
            <i class="fa fa-times"></i>
          </span>
        </span>
        <a href="#" class="active list-group-item graph_area">Average</a>
        <a href="#" class="list-group-item graph_area">Sum</a>
        <a href="#" class="list-group-item graph_area">Minimum</a>
        <a href="#" class="list-group-item graph_area">Maximum</a>
        <div id="bloodhound">
          <input class="graph_typeahead form-control" id="graph_textbox" type="text" placeholder="Filterbyarea">
          <input type="button" id="graph_btnclear" class="pull-right" onclick="graph_cleardropdown()" value="Clear" />
        </div>
      </div>
    </div>
    <div class="col-md-10">
      <canvas id="canvas">
      </canvas>
      <div id="js-legend" class="chart-legend"></div>

      <input type="text" class="basic" />
      <em id='basic-log'></em>
      <div id="spec" class="col-sm-6">
        <input type="text" class="basic_compare" />
        <em id='basic-log_compare'></em>
      </div>

      <div id="graph_legend"></div>
      <div id="graph_slider"></div>

    </div>
    <canvas id='blank' style='display:none'></canvas>
  </div>
  <div id="map1"></div>
</div>