尝试在另一个具有Id的特定"h1“之前插入"h1”

Question

我需要帮助的特定代码行已经标记，但我已经包含了上下文的整个函数。指定代码行的预期输出应该如下所示:我希望在元素"#" + nextRank + "A"之前插入元素newNode (nextRank定义为大写字母，就像rank一样)。我相信我的代码中的错误来自于特定行上的nextRank语法，但我可能错了。无名氏有人知道我怎么解决这个问题吗？

//rank is a capital letter (EX: "A")
//nodeField is a div which only parents h1's.

function addNode(rank) {
    var alphabet = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
    var nextRank = alphabet[alphabet.indexOf(rank) + 1];
    
    if ($('#nodeField>h1[id^="${rank}"]').length) {
        var aI = alphabet.indexOf($('#nodeField>h1[id^="${rank}"]:last-child')[$('#nodeField>h1[id^="${rank}"]:last-child').length - 1]) + 1;
    } else {
        var aI = 0;
    }
    
    var newNode = document.createElement("h1");
    newNode.innerHTML = 0;
    newNode.id = rank + alphabet[aI];
    
    if ($(`#nodeField>h1[id^="${nextRank}"]`).length > 0) {
        
        //I need help with correcting the statement below!
        document.getElementById("nodeField").insertBefore(newNode, $("#" + nextRank + "A"));

    } else {
        document.getElementById("nodeField").appendChild(newNode);
    }
}

Answer 1

您混合了jQuery和纯JS元素。有两种方法可以在之前插入新元素。

使用纯JS：

​

var newNode = document.createElement("h1");
newNode.innerHTML = 0;
newNode.id = "rankId";

document.getElementById("myDiv").insertBefore(newNode, document.getElementById("myInnerDiv"));

<div id="myDiv">
  <div>&nbsp;</div>
  <div id="myInnerDiv">inner div</div>
  <div>&nbsp;</div>
</div>

​

在您的案例中：

document.getElementById("nodeField").insertBefore(newNode, document.getElementById(nextRank + "A"));

使用jQuery：

​

var newNode = document.createElement("h1");
newNode.innerHTML = 0;
newNode.id = "rankId";

$(newNode).insertBefore($("#myInnerDiv"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv">
  <div>&nbsp;</div>
  <div id="myInnerDiv">inner div</div>
  <div>&nbsp;</div>
</div>

​

在您的案例中：

$(newNode).insertBefore($("#" + nextRank + "A"))