Javascript appendChild不处理某些元素

我正在做一个普通的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:

当您这样做时：

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

---

它确实有效。它只是没有显示任何内容，因为表单是空的。检查开发工具并检查HTML。

对于任何想知道的人来说，代码都是完美的。问题是我在代码的其他地方附加了这个表单。因此出现了冲突，因为一方优先于另一方。我可以使用

.cloneNode（true）

作为解决方案。我结束了在新目标的基础上的转变，解决了这个问题

---

外面有人。。。检查所有代码中是否存在同一元素的任何其他附加。好建议；）

你的原始代码适合我@我真的不明白为什么，但小提琴是逻辑的结果，这正是我所需要的，但在我的代码中，它只在旋转选择器时起作用。真奇怪。。。如果我发现了什么，我会告诉你的。

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

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