Javascript 如何将菜单标记移出标题并将其插入HTML中的其他位置？_Javascript_Html_Css_Markup

Javascript 如何将菜单标记移出标题并将其插入HTML中的其他位置？

javascript html css

Javascript 如何将菜单标记移出标题并将其插入HTML中的其他位置？,javascript,html,css,markup,Javascript,Html,Css,Markup,所以，我有一个汉堡包菜单移动内的标题。在桌面上，情况会发生变化，菜单位于主内容左侧标题下方。是否有一种（JavaScript）方法可以使用现有标记，即将导航标记及其内容移动到#overlay之外，并将其放在aside标记中？还是复制菜单标记是唯一的方法 <header> <div id="overlay"> <nav id="navbar"> <

所以，我有一个汉堡包菜单移动内的标题。在桌面上，情况会发生变化，菜单位于主内容左侧标题下方。是否有一种（JavaScript）方法可以使用现有标记，即将导航标记及其内容移动到#overlay之外，并将其放在aside标记中？还是复制菜单标记是唯一的方法

<header>
   <div id="overlay">
        <nav id="navbar">
            
            <ul class="menu">
                <li class="item-group">
                    <a href="index.html">The Story.</a>
                </li>

                <li class="item-group">
                    <a href="everyday-life.html">Everyday Life</a>
                </li>
   </div>
</header>

<aside> Side menu on desktop </aside>







代码的工作原理
正文中添加了一个函数，用于侦听调整屏幕宽度的大小onresize=“navigationFunc（）”

当我们重新加载页面时要显示在正确的位置，添加了onload=“navigationFunc（）”

当宽度小于1000px时（您可以在代码中对此进行更改）。使用ID#mobile


文件
Lorem ipsum dolor sit amet
var nav=document.getElementById（'navigation'）；
var dsk=document.getElementById（'desktop'）；
var mob=document.getElementById（'mobile'）；
函数navigationFunc（）{
var w=窗宽、外径；
如果（w<1000）{
//mob.appendChild（nav）；//最后添加
mob.insertBefore（nav，mob.childNodes[0]）；//首先添加
}否则{
//dsk.appendChild（nav）；//最后添加
dsk.insertBefore（nav，dsk.childNodes[0]）；//首先添加
}
}
您可以通过选择父元素然后获取其子元素来完成此操作。下一步是将子元素附加到另一个将成为父元素的元素，然后从当前父元素中删除子元素
是父元素，
是其子元素

您可以声明另一个父元素，即


然后获取
元素及其内容

然后使用appendChild（）

将其附加到父元素-#app
使用removeChild（）

请参阅下面的代码片段
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <div id="overlay">
        <nav>
            <ul>
                <li>hello</li>
                <li>yo</li>
            </ul>
        </nav>
    </div>


    <script>
        const app = document.querySelector('#app')
        const overlay = document.querySelector('#overlay')  
        const el = overlay.firstElementChild    // gets the elements inside the element with an id of overlay

        app.appendChild(el)
        overlay.removeChild()

    </script>
</body>
</html>


文件

你好
哟

const app=document.querySelector（“#app”）
const overlay=document.querySelector（“#overlay”）
const el=overlay.firstElementChild//获取元素中id为overlay的元素
附件二（el）
overlay.removeChild（）

你可以打开chrome开发工具，进入“元素”选项卡。您将看到nav
现在被包装在#app
中，但在您的代码中，nav
被包装在覆盖层中
谢谢！工作起来很有魅力。：）我做了你想要的改变！：）谢谢很高兴知道这个选项。：）记得flexbox，所以我只是更改了订单。