在动态父div之后插入？

Question

我正在尝试确定是否可以在弹出加载后插入要加载的元素。

我有 2 个弹出窗口。使用上传器元素（我正在使用外部库），我遇到的问题是我的上传器在弹出窗口之前加载。

上传器放在索引页面时效果很好，但在弹出窗口时无法正确加载。

我的想法（我不确定这是否可行）但尝试在当前父 div 之后加载上传器（如果它的索引或弹出窗口）。

问题是我的平台每次加载页面时都会随机更改弹出窗口 id 和类，所以我需要直接引用当前父 div 的内容。

我试过了：

const inputElement = document.querySelector('input[type="file"]');
const pond = FilePond.create( inputElement, fileOPs);
$("uploader").insertAfter(this);

也试过

$("uploader").insertAfter(this.div);

但没有运气。有什么办法可以做我正在尝试的事情吗？ 谢谢！

Answer 1

如果代码源自不是div 的元素，并且您想找到最近的祖先div，请使用this.closest("div")。

这是一个示例（原版 JavaScript）：

document.getElementById("level3").addEventListener("click", function(evt){
  console.log(this.parentNode.closest("div").id);
});

<div id="level1">
  <div id="level2">
    <span id="level3">Click Me</span>
  </div>
</div>

如果代码源自div，并且您想找到最近的祖先div，请使用this.parentNode.closest("div")。

这是一个示例（原版 JavaScript）：

document.getElementById("level3").addEventListener("click", function(evt){
  console.log(this.parentNode.closest("div").id);
});

<div id="level1">
  <div id="level2">
    <div id="level3">Click Me</div>
  </div>
</div>

对于 JQuery，无论代码源自什么类型的元素，您都将使用以下内容：

$("#level3").on("click", function(evt){
  console.log($(this).closest("div").get(0).id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="level1">
  <div id="level2">
    <span id="level3">Click Me</span>
  </div>
</div>

一旦引用了正确的元素，就可以根据需要插入新节点。