How to move html elements using Javascript?

Question

Is it possible to attach html tag to others using Javascript?

<li> to other <li> ?

For instance, I'm creating dropdown menu. I have div separate from the <ul> tag

<ul>
  <li>menu1</li>
  <li>menu2</li>
</ul>

<div id="submenu1">
     <li>sub1</li>
     <li>sub2</li>
</div>

When I click, say, a link, then I want sub menu to show up under menu1 so result would be like:

<ul>
  <li>menu1</li>
  <div id="submenu1">
     <li>sub1</li>
     <li>sub2</li>
  </div>
</ul>

The reason why I choose <div> to be separated from beginning instead of nested in <li> tag is that if I set the <div> "hide", it hides but it occupies the space and created big space between menu1 and any content below, so my page looks weird like:

mypage
----------------------------
| menu1
|
|                  <------ big open space div is hiding
|             
|
| hello content start here

EDIT

Thanks for the tip guys, I've solved the problem with removing div and have nested <ul> per suggestion. The elements are still being shifted when submenu shows up but used CSS position:absolute and specifying z-index helped.

Answer 1

If you use display: none in your CSS then the hidden element doesn't need any space:

HTML:

<ul>
  <li>menu1
    <ul id="submenu1">
       <li>sub1</li>
       <li>sub2</li>
    </ul>
  </li>
  <li class="active">menu2
    <ul id="submenu1">
      <li>sub1</li>
      <li>sub2</li>
    </ul>
</ul>

CSS:

li ul {
  display: none;
}

li.active {
  display: block;
}

Answer 2

This is invalid HTML. A li should be contained in either a ol or a ul element. Change

<div id="submenu1">
     <li>sub1</li>
     <li>sub2</li>
</div>

to

<ul id="submenu1">
     <li>sub1</li>
     <li>sub2</li>
</ul>

For your main problem, there is no need to put the div (or ideally ul) outside the main ul. When you hide an element by setting its visibility to hidden, it will still take up the empty space. To complete hide it and remove any space it was taking, set the display CSS property to none.

document.getElementById('submenu1').style.display = 'none';

Answer 3

Usually you put the submenu in another <ul> inside an <li> in your main menu (so that you get valid HTML), and hide it with display: none CSS property and show it on click.

  <ul>
    <li><a href="menu1">menu item 1</a><ul class="submenu">
      <li>sub 1</li>
    </ul></li>
    <li><a hrf="menu2">menu item 2</a></li>
  </u>

Then in your CSS (or added using js):

  ul.submenu {
     display: none;
  }
  a:hover + ul.submenu, ul.submenu:hover {
     display: block;
  }

This one will work on modern browsers without any js! But you can do it with js too, of course.

Answer 4

<ul>
  <li>menu1</li>
  <div id="submenu1" style="display: none">
     <li>sub1</li>
     <li>sub2</li>
  </div>
  <li>menu2</li>
</ul>

Try it, this will make the div take up no space. if you use visiblity: hidden then it will take up space.

Answer 5

This is usually done via CSS. You have the entire menu pre-created (note that nesting <div> within <ul> is invalid HTML):

<ul class="menu">
  <li>menu1
    <ul class="submenu">
      <li>sub1</li>
      <li>sub2</li>
    </ul>
  </li>
</ul>

and then you declare in CSS:

ul.submenu {
  display: none;
}

Now you can remove or add the "submenu" CSS class from the <ul> through JavaScript, or you set the .style.display property.

Or even more elegantly (but less cross-browser compatible, if you still care for old browsers), entirely without JavaScript through pure CSS:

ul.menu > li:hover ul.submenu {
  display: block;
}
ul.submenu:hover {
  display: block;
}