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

Question

已更新 - 检查答案

我有一个 track-card 和一个 overflow:hidden 属性。

在每个track-card中，我都有一个（+）符号，

当我单击它时，track-card 中会出现一个弹出窗口。

我正在使用 JS hide/unhide 弹出窗口，如下所示：

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>

track-card css

.track-card {
    width: 250px;
    height: 480px;
    backdrop-filter: blur(5px);
    border-radius: 10px;
    text-align: center;
    overflow:hidden;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.8);
}

问题：我希望弹出窗口出现在 track-card 之外。问题是，track-card 是 parent div 和属性 overflow:hidden。弹出窗口还包含一个表单，该表单依赖于收集 track.id 以包含在提交表单中的 @track 循环。

我尝试了几种方法来用 css 覆盖 overflow:hidden 但没有成功。我现在正在尝试一些 JS 将弹出窗口附加到文档的正文。我认为通过将弹出窗口附加到 track-card 之外的元素，我仍然能够在渲染弹出窗口时收集 track.id，而 parent overflow:hidden 不会影响弹出窗口。

我在想这样的事情

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

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

P.S。我试过在 child 上使用绝对值，在 parent 上使用相对值，但没有成功

再次感谢！

Answer 1

所以我设法将我的弹出窗口附加到文档开头的 div，没有任何溢出或网格样式。

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

这对我有用，所以我将此问题标记为已回答。

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

How to append a div to another element in document? UPDATED

javascript

ruby

appendchild