How to append a hidden div inside another div and display it only there using jquery

Question

I have a div which contains a list which is hidden. Now i am trying to append that div and display it inside <th> of a table when it is clicked.

I have taken the <ul> inside a div and by JQUERY html() and append(), i am appending the <ul> inside the clicked <th> but its still hidden. How can i make it visible only in the clicked <th> and display only once, not appending multiple times.

Here is what i have done so far.

/* Right click on column name */
$(document).ready(function() {
  $("body").on("contextmenu", function() {
    return false;
  });
});

$(document).ready(function() {
  var menu = $(".menu-div").html();
  $(".mytable th").on("contextmenu", function() {
    $(this).append(menu);
    console.log(menu);
  });
});

.datatable-menu {
  position: absolute;
  background: #fff;
  width: 200px;
  z-index: 2000;
  display: none;
}
.datatable-menu li {
  padding: 10px;
}
.datatable-menu li:hover {
  background: #f0f0f0;
  cursor: pointer;
}
.datatable-menu li a {
  color: #191919;
  font-weight: normal;
}

<div class="menu-div">
  <ul class="datatable-menu z-depth-1">
    <li><a href="#">Change Datatype</a>
    </li>
    <li><a href="#">Find And Replace</a>
    </li>
    <li><a href="#">Rename Columns</a>
    </li>
    <li><a href="#">Split Columns</a>
    </li>
    <li><a href="#">Join Columns</a>
    </li>
  </ul>
</div>

<table class="mytable">
  <thead>
    <th>click me</th>
  </thead>
</table>

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

Answer 1

Here is the working example for you, Yes for output to show as you want you can write a bit of css according to need.

/* Right click on column name */
$(document).ready(function() {
  $("body").on("contextmenu", function() {
    return false;
  });
});

$(document).ready(function() {
  var menu = $(".menu-div").html();
   //Change event to 'click' from 'contextmenu'
  $(".mytable th").on("click", function() {
   $(this).append(menu);
   //additional Line in code 
   $('.datatable-menu').css("display", "block");
  });
});

.datatable-menu {
  position: absolute;
  background: #fff;
  width: 200px;
  z-index: 2000;
  display: none;
}
.datatable-menu li {
  padding: 10px;
}
.datatable-menu li:hover {
  background: #f0f0f0;
  cursor: pointer;
}
.datatable-menu li a {
  color: #191919;
  font-weight: normal;
}

<div class="menu-div">
  <ul class="datatable-menu z-depth-1">
    <li><a href="#">Change Datatype</a>
    </li>
    <li><a href="#">Find And Replace</a>
    </li>
    <li><a href="#">Rename Columns</a>
    </li>
    <li><a href="#">Split Columns</a>
    </li>
    <li><a href="#">Join Columns</a>
    </li>
  </ul>
</div>

<table class="mytable">
  <thead>
    <th>click me</th>
  </thead>
</table>

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

Answer 2

Just add this after appending to th

$(this).find(".datatable-menu").show();

/* Right click on column name */
$(document).ready(function() {
  $("body").on("contextmenu", function() {
    return false;
  });
});

$(document).ready(function() {
  var menu = $(".menu-div").html();
  $(".mytable th").on("contextmenu", function() {
    if($(this).find(".datatable-menu").length == 0){ //to check multiple appending
       $(this).append(menu);
       $(this).find(".datatable-menu").show();
    }
    console.log(menu);
  });
});

.datatable-menu {
  position: absolute;
  background: #fff;
  width: 200px;
  z-index: 2000;
  display: none;
}
.datatable-menu li {
  padding: 10px;
}
.datatable-menu li:hover {
  background: #f0f0f0;
  cursor: pointer;
}
.datatable-menu li a {
  color: #191919;
  font-weight: normal;
}

<div class="menu-div">
  <ul class="datatable-menu z-depth-1">
    <li><a href="#">Change Datatype</a>
    </li>
    <li><a href="#">Find And Replace</a>
    </li>
    <li><a href="#">Rename Columns</a>
    </li>
    <li><a href="#">Split Columns</a>
    </li>
    <li><a href="#">Join Columns</a>
    </li>
  </ul>
</div>

<table class="mytable">
  <thead>
    <th>click me</th>
  </thead>
</table>

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>