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 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>
$('.tomove').appendTo('#menu-item')$( ".tomove" ).detach().appendTo('#menu-item')