英文:
How to move existing div elements into newly created div element
问题
我正在尝试在clientWidth
为600px
时,将现有的div
元素移动到我使用JavaScript创建的新div
元素中。
从这个:
<div class="navbar">
<div class="logo">
<h2>Logo</h2>
</div>
<div class="burger">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<div class="nav-items">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">FAQS</a></li>
</ul>
</div>
<div class="action-btn">
<button>hire me</button>
</div>
</div>
变成这个:
<div class="navbar">
<div class="logo">
<h2>Logo</h2>
</div>
<div class="burger">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<div class="navgroup">
<div class="nav-items">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">FAQS</a></li>
</ul>
</div>
<div class="action-btn">
<button>hire me</button>
</div>
</div>
</div>
以下是我的代码:
let burger = document.querySelector('burger');
let navItems = document.querySelector('nav-items');
let btn = document.querySelector('action-btn');
let navbar = document.querySelector('.navbar');
let navGroup = document.createElement('div');
navGroup.className = 'navgroup';
if (document.documentElement.clientWidth <= 600) {
navbar.appendChild(navGroup);
navGroup.appendChild(btn);
navGroup.appendChild(navItems);
}
英文:
I am trying to move existing div
elements into a new div
element I created using JavaScript when the clientWidth
is 600px
.
From this
<div class="navbar">
<div class="logo">
<h2>Logo</h2>
</div>
<div class="burger">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<div class="nav-items">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">FAQS</a></li>
</ul>
</div>
<div class="action-btn">
<button>hire me</button>
</div>
</div>
To this
<div class="navbar">
<div class="logo">
<h2>Logo</h2>
</div>
<div class="burger">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<div class="navgroup">
<div class="nav-items">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">FAQS</a></li>
</ul>
</div>
<div class="action-btn">
<button>hire me</button>
</div>
</div>
</div>
Here is my code.
let burger = document.querySelector('burger');
let navItems = document.querySelector('nav-items');
let btn = document.querySelector('action-btn');
let navbar = document.querySelector('.navbar');
let navGroup = document.createElement('div')
navGroup.className = 'navgroup';
if (document.documentElement.clientWidth <= 600) {
navbar.appendChild(navGroup)
navGroup.appendChild(btn)
navGroup.appendChild(navItems)
}
答案1
得分: 2
你的代码存在一些问题。首先,在使用 document.querySelector() 时,你需要提供有效的 CSS 选择器。在你的情况下,你忘记了使用点号(.)来选择具有类名的元素。因此,你应该使用 .burger、.nav-items 和 .action-btn,而不是 'burger'、'nav-items' 和 'action-btn'。
其次,你需要正确将 navGroup 元素附加到 DOM 中。不要使用 navbar.appendChild(navGroup),而应该在 burger 元素之前插入它。这可以通过使用 insertBefore() 方法来完成。
这是修改后的代码:
let burger = document.querySelector('.burger');
let navItems = document.querySelector('.nav-items');
let btn = document.querySelector('.action-btn');
let navbar = document.querySelector('.navbar');
let navGroup = document.createElement('div');
navGroup.className = 'navgroup';
if (document.documentElement.clientWidth <= 600) {
navbar.insertBefore(navGroup, burger);
navGroup.appendChild(navItems);
navGroup.appendChild(btn);
}
通过这些更改,代码应该将 navItems 和 btn 元素移动到新创建的 navGroup 元素中,并在客户端宽度小于或等于 600 像素时将 navGroup 插入到 burger 元素之前。
英文:
There are a few issues with your code. First, when using document.querySelector(), you need to provide a valid CSS selector. In your case, you are missing the dot (.) to select elements with class names. So, you should use .burger, .nav-items, and .action-btn instead of 'burger', 'nav-items', and 'action-btn'.
Second, you need to correctly append the navGroup element into the DOM. Instead of using navbar.appendChild(navGroup), you should insert it before the burger element. This can be done using the insertBefore() method.
Here's the modified code:
let burger = document.querySelector('.burger');
let navItems = document.querySelector('.nav-items');
let btn = document.querySelector('.action-btn');
let navbar = document.querySelector('.navbar');
let navGroup = document.createElement('div');
navGroup.className = 'navgroup';
if (document.documentElement.clientWidth <= 600) {
navbar.insertBefore(navGroup, burger);
navGroup.appendChild(navItems);
navGroup.appendChild(btn);
}
With these changes, the code should move the navItems and btn elements into the newly created navGroup element, and then insert navGroup before the burger element when the client width is less than or equal to 600 pixels.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论