如何使用Javascript移动html元素？

是否可以使用Javascript将html标记附加到其他标记

到其他

例如，我正在创建下拉菜单。
我将div与
标记分开

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

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


菜单1
菜单2

sub1
sub2

当我点击一个链接时，我希望子菜单显示在菜单1下，结果如下：

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


菜单1
sub1
sub2


我之所以选择将
从开头分开，而不是嵌套在
标记中，是因为如果我将
设置为“隐藏”，它会隐藏，但会占用空间，并在menu1和下面的任何内容之间创建了很大的空间，因此我的页面看起来很奇怪：

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

mypage
----------------------------
|菜单1
|
|如果在CSS中使用
display:none
，则隐藏元素不需要任何空间：

HTML:

这是无效的HTML。li应包含在
ol
或
ul
元素中。改变

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

通常，您会将子菜单放在主菜单中的另一个
中（以便获得有效的HTML），然后使用
display:none
CSS属性将其隐藏，并在单击时显示

  <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>

这将在没有任何js的现代浏览器上运行！当然，你也可以用js来做。

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

菜单1
sub1
sub2
菜单2


试试看，这将使div不占用任何空间。如果使用visiblity:hidden，则会占用空间。
这通常通过CSS完成。您已经预先创建了整个菜单（请注意，
中的嵌套
是无效的HTML）：

现在，您可以通过JavaScript从
中删除或添加“submenu”CSS类，或者设置
.style.display
属性

或者更优雅（但如果您仍然喜欢旧浏览器，则跨浏览器兼容性较差），完全不需要通过纯CSS使用JavaScript：

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

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

  <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>

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

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

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

ul.submenu {
  display: none;
}

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