insertAdjacentHTML 在父容器之后而不是在该容器内的 Div 之后插入

Question

我有基本的U.S。地图。它需要固定位置。州的缩写也有固定的位置。根据用户输入查询数据库。当该查询的结果包含与特定状态相关的信息时，我更改了格式化按钮的状态缩写的 class。我的目标是生成一个 div 保存与按钮下方的状态相关的信息。我的问题是，div 不是出现在州缩写按钮之后，而是出现在持有地图的容器之后。 CSS

<style>
    #MapContainer {position:absolute; width:1760px; height:1099px; top:0; left:0; padding:0; z-index:1;}
    .Abr {position:absolute; font-size:18px; font-weight:bold; color:#006393; z-index:100}
    .Active {background:red; padding:6px; color:white; border:1px solid black; border-radius:50%;}
</style>

HTML 和 PHP（我会显示一种状态）

<div id="MapContainer">
    <img src="maps/TransUSA-All50-1760x1099.png" style="width:100%" />
    <div class="Abr" id="WA" style="top:100px; left:238px;">WA</div>
    // Database queries follow here after all state names have been defined
    while($Info = i5_fetch_array($Result))
   {
     switch($Info[STATE])
     {
     case "WA":
        echo('<script>$("#WA").addClass("Active"); var Rates = "'.$Info[Rates].'"; var Charges = "'.$Info[Charges].'";</script>');
        break;
     //etc.
    }
</div>

显然，我需要将变量（费率、费用）发送到创建显示的函数。但这不是我目前关心的问题。这道题的目的是，首先，让保存数据的div出现在状态缩写按钮下方。

jQuery

<script type="text/JavaScript">
    $(".Active").on("click", function()
    {
       this.insertAdjacentHTML("afterend","<div>This is a data Div</div>");
    });
</script>

单击的结果是附加的 div 出现在地图容器的末尾，而不是直接出现在“WA”缩写按钮之后。

示例：

<div id="MapContainer">
    <div id="WA">WA</div>
    // Data div should appear here
</div>
// Data div appears here



  ___________________________________________________
    |                                                 |
    |  <div>WA</div>                                  |
    |   <div>Data div should appear here</div>        |
    |                                                 |
    |_________________________________________________|
    <div>Data div appears here instead</div>

我创建了一个fiddleHere 但是在这里，它没有出现在地图块下方，而是出现在其中。当然，仍然不是想要的结果。

最终结果 对于那些感兴趣的人，这是最终结果，但仍然需要注意 - 以这种方式使用固定定位，我未能找到堆叠结构的补救措施，因此信息框被相邻状态缩写覆盖。

https://jsfiddle.net/RationalRabbit/rj8g2bqm/87/

我最终的解决方案是简单地截取带有缩写的地图的屏幕截图并将其用作背景，从跨度部分中删除缩写，并在状态处于活动状态时添加它们。不过，一些活动按钮覆盖了信息框，我通过更改它们的呈现顺序解决了这个问题。然后我意识到这可能首先是解决方案，尽管我还没有测试过。例如，如果在缩写定义中将缩写“ID”放在“OR”之前，这可能会解决问题。

Answer 1

实际上 insertAdjacentHTML 不是 jQuery 的一部分。这是 DOM 元素的方法。请参阅下面的示例，它是如何工作的：

var div = document.querySelector('#idDiv');
div.insertAdjacentHTML('beforebegin', '<p>beforebegin</p>');
div.insertAdjacentHTML('afterbegin', '<p>afterbegin</p>');
div.insertAdjacentHTML('beforeend', '<p>beforeend</p>');
div.insertAdjacentHTML('afterend', '<p>afterend</p>');

console.log(document.querySelector('#container').outerHTML);

div {
  color: blue;
  border: 1px solid blue;
  padding: 5px;
}
p {
  color: red;
  border: 1px solid red;
  padding: 5px;
}

<div id="container">
<div id="idDiv">ORIGINAL HTML DIV CONTENT</div>
</div>

Answer 2

检查下面的代码，在 codepen 中添加了相同的代码 Positioned DIVs for MAP

$(document).ready(function () {
    $("#WA").addClass("Active");
    $(".Active").on("click", function (e) {
        var $this = $(this), $data = $this.next('.AbrData');
        var ST = "AK"; // You can pull this from the state div along with the data
        if ($data.length == 0) {
            $data = $("<div class='AbrData'></div>").insertAfter($this);
            $data.append('<div id="' + ST + 'Data">This is a data Div</div>');
        }
        else {
            $data.toggle();
        }
    });
});

#MapContainer {
    position: absolute;
    width: 700px;
    height: 400px;
    top: 10px left 10px;
    padding: 0;
    z-index: 1;
    border: 2px solid black;
}

.Abr {
    position: absolute;
    font-size: 18px;
    font-weight: bold;
    color: #006393;
    z-index: 100;
}

.AbrData {
    position: relative;
    top: 10px;
    font-size: 12px;
    color: blue;
    z-index: 101;
    max-height: 100px;
    overflow: auto;
    border: 1px solid grey;
}

.Active {
    background: red;
    padding: 6px;
    color: white;
    border: 1px solid black;
    border-radius: 50%;
    cursor: pointer;
}

<div id="MapContainer">
    <div class="Abr" style="top:100px; left:238px;">
        <span id="WA">WA</span>
    </div>
    <div class="Abr" style="top:213px; left:207px;">
        <span id="OR">OR</span>
    </div>
    <div class="Abr" style="top:315px; left:550px;">
        <span id="WY">WY</span>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

我合并了建议的更改，切换数据后出现的线是div.AbrData的边框。我已经更改了切换线，因此它切换 div.AbrData 而不是内部内容。

// Changed this toggle
$("#"+ST+"Data").toggle();

// To this
$data.toggle();

insertAdjacentHTML 在父容器之后而不是在该容器内的 Div 之后插入

insertAdjacentHTML Inserts After the Parent Container Rather Than After The Div Inside That Container

jquery

css

z-index

positioning

fixed