如何将现有的
元素移动到新创建的
元素中。

huangapple go评论66阅读模式
英文:

How to move existing div elements into newly created div element

问题

我正在尝试在clientWidth600px时,将现有的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

&lt;div class=&quot;navbar&quot;&gt;
    &lt;div class=&quot;logo&quot;&gt;
         &lt;h2&gt;Logo&lt;/h2&gt;
     &lt;/div&gt;
     &lt;div class=&quot;burger&quot;&gt;
          &lt;div class=&quot;line-1&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;line-2&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;line-3&quot;&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class=&quot;nav-items&quot;&gt;
          &lt;ul&gt;
             &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href=&quot;#&quot;&gt;FAQS&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
     &lt;/div&gt;
     &lt;div class=&quot;action-btn&quot;&gt;
          &lt;button&gt;hire me&lt;/button&gt;
     &lt;/div&gt;
&lt;/div&gt;

To this

&lt;div class=&quot;navbar&quot;&gt;
    &lt;div class=&quot;logo&quot;&gt;
         &lt;h2&gt;Logo&lt;/h2&gt;
     &lt;/div&gt;
     &lt;div class=&quot;burger&quot;&gt;
          &lt;div class=&quot;line-1&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;line-2&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;line-3&quot;&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class=&quot;navgroup&quot;&gt;
         &lt;div class=&quot;nav-items&quot;&gt;
             &lt;ul&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;FAQS&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
         &lt;/div&gt;
         &lt;div class=&quot;action-btn&quot;&gt;
              &lt;button&gt;hire me&lt;/button&gt;
         &lt;/div&gt;
     &lt;/div&gt;
&lt;/div&gt;

Here is my code.

let burger = document.querySelector(&#39;burger&#39;);
let navItems = document.querySelector(&#39;nav-items&#39;);
let btn = document.querySelector(&#39;action-btn&#39;);
let navbar = document.querySelector(&#39;.navbar&#39;);

let navGroup = document.createElement(&#39;div&#39;)
navGroup.className = &#39;navgroup&#39;;

if (document.documentElement.clientWidth &lt;= 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(&#39;.burger&#39;);
let navItems = document.querySelector(&#39;.nav-items&#39;);
let btn = document.querySelector(&#39;.action-btn&#39;);
let navbar = document.querySelector(&#39;.navbar&#39;);

let navGroup = document.createElement(&#39;div&#39;);
navGroup.className = &#39;navgroup&#39;;

if (document.documentElement.clientWidth &lt;= 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.

huangapple
  • 本文由 发表于 2023年6月16日 00:31:23
  • 转载请务必保留本文链接:https://go.coder-hub.com/76483752.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定