How to move an element into another one using jQuery

Question

I'm trying to move an element into another one so a css :hover would work.

<ul>
  <li id="menu-item"> //move into here </li>
</ul>

<div class="tomove">...</div>

'tomove' is display:none;

menu-item:hover makes 'tomove' display:block;

I need this to work with css :hover and be moved into a <li> item

you can use like `$( ".tomove" ).detach().appendTo('#menu-item')` — vijayP, Aug 26 '15 at 11:03
possible duplicate of [How to move an element into another element?](http://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element) — Kriggs, Aug 26 '15 at 11:13

Tushar · Accepted Answer · 2015-09-02T04:31:12.713

You can use appendTo() to move element in DOM

Insert every element in the set of matched elements to the end of the target.

Demo

$('.tomove').appendTo('#menu-item');

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  color: green;
}
#menu-item:hover {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul>
  <li id="menu-item">//move into here</li>
</ul>

<div class="tomove">Move me There</div>

How to move an element into another one using jQuery

1 Answers1