appendChild 不适用于某些元素答案

【问题标题】：appendChild not working on some elementsappendChild 不适用于某些元素
【发布时间】：2014-06-24 18:01:47
【问题描述】：

我正在开发一个普通的 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);

【问题讨论】：

您的原始代码对我有用。 jsfiddle.net/8mB3h
@Arbel 我真的不明白为什么，但小提琴是逻辑结果，这正是我所需要的，但在我的代码中它只适用于转动选择器。真的很奇怪……如果我发现了什么我会告诉你的。

标签： javascript html forms appendchild

【解决方案1】：

当你这样做时：

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

它确实有效。它只是没有显示任何东西，因为表格是空的。检查您的开发工具并检查您的 HTML。

【讨论】：

【解决方案2】：

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

那里的任何人...检查所有代码以查找同一元素的任何其他附加内容。好建议；）

【讨论】：