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

问题描述

更新 - 检查答案

我有一个带有 overflow:hidden 属性的跟踪卡。

在每张跟踪卡中，我都有一个 (+) 符号，

当我点击它时，跟踪卡中会出现一个弹出窗口。

我正在使用 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>

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.8);
}

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

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

我是这么想的

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'));

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

appendchild javascript ruby ruby ruby