javascript - .load() 在 DOM 中的另一个 div 之前添加一个 div（不在内部）

Question

我有一个分为 2 列（每列宽度为 50%）的站点：

HTML：

<nav></nav>
<div class="left-column"></div>
<div class="right-column"></div>
<footer></footer>

我有一个带有 html 的辅助页面：

<nav></nav>
<div class="left-column"></div>
<div class="right-column level-two"></div>
<footer></footer>

使用 .load() 我希望在第一页右栏的顶部加载第二页的右栏（目的是在之后添加一个关闭框）。

html 看起来像这样：

   <nav></nav>
   <div class="left-column"></div>
   <div class="right-column level-two"></div> //THE RIGHT COLUMN FROM LEVEL 2 INSERTED HERE
   <div class="right-column"></div>
   <footer></footer>

问题是我想不出一种方法来做到这一点： .append() 仍然将它添加到它所附加的 div 中，并且 .before() 不能仅添加 jquery(?) 内容？

我希望两个右列存在，因为如果我关闭，right-column level-two我仍然想要原始的right-column下面。

Answer 1

$.get('<secondary_page_url>',function (data) {
  $(data).find('.right-column.level-two').insertBefore($('.right-column'));
})

Answer 2

• 使用CSS选择器搜索类left-column及其邻居类right-column
• holder从两个类之间插入数据

---

    $(document).ready( function () {
        $.get('second-page-url.html',function (data) {
        $(data).find('.right-column.level-two').insertBefore($('.left-column + .right-column'));
});