Javascript 如何将div附加到文档中的另一个元素？更新

更新-检查答案

我有一张带有溢出：隐藏属性的跟踪卡

在每张轨迹卡中，我都有一个（+）符号

当我单击它时，轨迹卡中会出现一个弹出窗口

我正在使用JS隐藏/取消隐藏弹出窗口，如下所示：

const pressAddToPlaylist = () => {
    const cards = document.querySelectorAll(".track-card");
    console.log(cards);
    cards.forEach((card) => {
        card.querySelector(".addtoplaylist").addEventListener("click", function () {
            card.querySelector(".pop-up").className = card.querySelector(".pop-up").className.replace(/(?:^|\s)hidden-popup(?!\S)/g, '');
        });
    });
}

这是弹出窗口

<% @track.each do |track| %>
// some code
 <div class="pop-up hidden-popup" id="popup">
   <h1>Choose Playlist</h1>
 <div class="playlist-form">
     <%= simple_form_for @playlist_track, url: playlist_tracks_path, method: :post do |f| %>
     <%= f.association :playlist, :collection => Playlist.all, label_method: :playlist_title %>
     <%= f.input :track_id, as: :hidden, input_html: { value: track.id } %>
     <%= f.submit "Create" %> 
     <% end %>
 </div>
<% end %>
 </div>

问题: 我希望弹出窗口出现在轨迹卡之外。问题是，跟踪卡是属性为overflow:hidden的父div。弹出窗口还包含一个表单，该表单依赖于@track循环，该循环收集track.id以在提交时包含在表单中

我尝试了几种方法来覆盖溢出：用css隐藏，但没有运气。我现在尝试使用一些JS将弹出窗口附加到文档主体中。我认为，通过将弹出窗口附加到轨迹卡之外的元素，我仍然能够在呈现弹出窗口时收集track.id，而不会影响弹出窗口的父溢出：hidden

我是这么想的

document.querySelectorAll('trackpopup').appendChild(document.getElementById('popup')

// trackpopup is the destination that popup  must be appended to.

另外，我试过在孩子身上使用绝对值，在父母身上使用相对值，但没有成功

---

再次感谢

因此，我设法将弹出窗口附加到文档开头的一个div中，该div没有任何溢出或网格样式

document.querySelector('#trackpopup').appendChild(document.querySelector('.pop-up'));

这对我很有效，所以我正在标记这个问题的答案

document.querySelector('#trackpopup').appendChild(document.querySelector('.pop-up'));