Question

我正在开发一个vanilla javascript项目，所以我不能使用jQuery。我正在尝试使用以下内容将一些HTML从一个展示位置移动到另一个展示位置：

parent.appendChild(element);

我正在尝试将表单放入不同的位置，因为我将其置于HTML代码的注释中。我正在尝试这个，但它根本不起作用。

使用Javascript：

var loginButton = document.querySelector('[data-login-header-button]');
var loginDropdown = document.querySelector('[data-login-dropdown]');

var shopCartButton = document.querySelector('[data-shopping-cart-header-button]');
var shopCartDropdown = document.querySelector('[data-shopping-header-cart]');

shopCartButton.parentNode.appendChild(shopCartDropdown);
loginButton.parentNode.appendChild(loginDropdown);

HTML：

<header>
    <nav data-nav-services>
        <ul class="nav-services">
            <li data-test>
                <a class="icon icon-shopping-cart icon-arrow-down" href="#" data-shopping-cart-header-button>
                    shopping cart
                </a>
                <!-- PLACEMENT FOR data-shopping-header-cart -->
            </li>
            <li>
                <a class="icon icon-user icon-arrow-down" href="#" data-login-header-button>
                    Login
                </a>
                <!-- PLACEMENT FOR data-login-dropdown -->
            </li>
        </ul>
    </nav>

    <form class="login-dropdown" data-login-dropdown>
        ...CONTENT...
    </form>

    <form class="shopping-cart" data-shopping-header-cart>
        ..CONTENT..
    </form>
</header>

奇怪的是，如果我转过选择器（如下所示）它确实有效，我无法解释为什么......

shopCartDropdown.parentNode.appendChild(shopCartButton);
shopCartDropdown.parentNode.appendChild(loginButton);

Answer 1

当你这样做时：

shopCartButton.parentNode.appendChild(shopCartDropdown);
loginButton.parentNode.appendChild(loginDropdown);

它确实有效。由于表格是空的，所以没有显示任何内容。检查您的开发工具并检查您的HTML。

Answer 2

对于任何想知道的人来说，代码是完美的。问题是我将此表单附加到我的代码的其他地方。所以存在冲突，因为一个优先于另一个。我可以使用.cloneNode(true)作为解决方案。我结束了改变，追加到我的新目标并解决了问题。

那里的任何人......检查所有代码是否包含相同元素的任何其他附加内容。好建议;）

appendChild没有处理某些元素

2 个答案: