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

Question

我有一张基本的美国地图。需要固定位置。州的缩写也在固定的位置。根据用户输入查询数据库。当该查询的结果包含与特定状态相关的信息时，我会更改用于格式化按钮的该状态缩写的类。我的目标是在按钮下方生成一个包含与该状态相关的信息的 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> 
 

我创建了一个小提琴Here 但是在这里，它不是出现在地图块下方，而是出现在其中。当然，仍然不是理想的结果。

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

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

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

Answer 1

检查下面的代码，在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();

Answer 2

其实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>